调皮的Grid布局

使用Grid布局时遇到的问题与解决方案

在less中使用简写属性

在less中使用 grid-column与grid-rows简写属性时,如下的写法

1
2
3
.grid-item {
grid-column: 1 / 4;
}

输出结果如下,发现”/“被当成运算符了

1
2
3
.grid-item {
grid-column: 0.25;
}

解决方法,需要使用escape的字符串

1
2
3
.grid-item {
grid-column: 1 Slash('/') 4;
}

https://stackoverflow.com/questions/45957961/problems-with-compile-grid-column-less

网格属性的transition渐变

grid布局中的一些属性无法对transition作出响应

https://stackoverflow.com/questions/43911880/using-css-transitions-in-css-grid-layout

超出网格区域

overflow-x元素

看看下面这个例子:

See the Pen Overflow-x Elements Inside CSS Grid (bug? behavior?) by Dave Rupert (@davatron5000) on CodePen.

理论上overflow-x会处理元素水平方向的溢出,但在这里却不起作用。

原因是因为Grid网格默认的min-width属性值为auto,这会导致它会根据溢出块的宽度来设置min-width的值。

所以为了解决内层嵌套子元素的这个问题,你需要反其道而行之的忽略父元素,直接将找到Grid元素将其中元素的min-width均设为0。

解决:

1
2
3
.grid > * {
min-width: 0;
}

表单中的input元素

下面这个例子中将表单的input元素放入了网格中,你试试缩小视口区域的水平宽度,会发现输入组件越出了网格。

See the Pen CSS Grid PRBLMZ 😢😓😭 by Dave Rupert (@davatron5000) on CodePen.

你可以通过给这些输入组件设置max-width: 100%,不过这只能修复Chrome和Safari下的一些组件,在Firefox和Edge下仍然会超出区域。

原因是因为<input>与这些元素(<img>, <progress>, <select>, <video>) 均为可替换元素,MDN中的描述如下:

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are a type of external object whose representation is independent of the CSS.

这些元素的渲染独立于CSS,他们具有一种固有区域,而这种区域在不同浏览器中表现不同,如下图

在我们的情况中,一些input元素具有浏览器所赋予的固有尺寸,大小大约为180px,也就是一个标准文本输入元素的尺寸。

为了在考虑浏览器兼容的同时解决这个问题,我们需要覆盖可替换元素的固有尺寸:

1
2
3
4
5
6
7
8
9
10
11
12
13
/* Apply max-width to Replaced Elements and Form controls */
img, video, audio, canvas, input,
select, button, progress { max-width: 100%; }
/* Make file and submit inputs text-wrap */
input[type="file"],
input[type="submit"] { white-space: pre-wrap; }
/* Fix Progress and Range Inputs */
progress,
input[type="range"] { width: 100%; }
/* Fix Number Inputs in Firefox */
@supports (--moz-appearance: none) {
input[type="number"] { width: 100%; }
}

https://daverupert.com/2017/09/breaking-the-grid/

文章目录
  1. 1. 在less中使用简写属性
  2. 2. 网格属性的transition渐变
  3. 3. 超出网格区域
    1. 3.1. overflow-x元素
    2. 3.2. 表单中的input元素
|