Un conjunto de elementos para mostrar: la cuadrícula se convierte en un contenedor de cuadrícula . Sus elementos secundarios se convierten en elementos de cuadrícula (elementos de cuadrícula).
1. Los componentes de la red:
grid-template-columns y grid-template-rows definen pistas de cuadrícula
grid-template-columns:1fr 1fr 1fr;
//表示三列等宽// 两行css 等价
grid-template-rows: repeat(4, auto);
grid-template-rows: auto auto auto auto;
// 定义了四个水平网格轨道，高度为auto，轨道大小设置为auto，轨道会根据自身内容扩展。grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
// minmax(200px,1fr):它指定两个值：最小尺寸和最大尺寸。
// 浏览器会确保网格轨道的大小介于这两者之间。（如果最大尺寸小于最小尺寸，最大尺寸就会被忽略。）通过指定minmax(200px, 1fr)，浏览器确保了所有的轨道至少宽200px。La palabra clave de autocompletar en la función repetir() es un valor especial. Cuando se establece, el navegador generará tantas pistas como quepa la cuadrícula sin entrar en conflicto con el límite de tamaño especificado (valor minmax()).
La palabra clave de ajuste automático reemplaza a la función de relleno automático. Hace que las pistas de cuadrícula no vacías se expandan para llenar el espacio disponible.
La elección específica de relleno automático o ajuste automático depende de si desea garantizar el tamaño de la pista de la cuadrícula o si desea que se llene todo el contenedor de la cuadrícula.
grid-gap: 1em;
// 属性定义了每个网格单元之间的间距。2. La diferencia entre Flexbox y grid
❑ Flexbox es inherentemente unidimensional, mientras que las cuadrículas son bidimensionales.
❑ Flexbox funciona de adentro hacia afuera con el contenido como punto de partida, mientras que la cuadrícula funciona de afuera hacia adentro con el diseño como punto de partida.
Debido a que Flexbox es unidimensional, funciona bien con filas (o columnas) de elementos similares. Admite el ajuste de línea con ajuste flexible, pero no puede hacer que los elementos de la línea anterior se alineen con los elementos de la línea siguiente. Por el contrario, las cuadrículas son bidimensionales y están diseñadas para resolver el problema de alinear elementos de una pista con elementos de otra pista.
Las cuadrículas se utilizan cuando el diseño requiere que los elementos estén alineados en ambas dimensiones. Use Flexbox cuando solo le importe la disposición de elementos unidimensionales
Se han diseñado tres sintaxis para el diseño de cuadrícula: líneas de cuadrícula numeradas , líneas de cuadrícula con nombre y áreas de cuadrícula con nombre
3. Numeración de líneas de cuadrícula
Después de definir la pista de la cuadrícula, cada elemento de la cuadrícula debe colocarse en una posición específica. El navegador asigna un número a cada línea de la cuadrícula, como se muestra en la Figura 6-7. CSS usa estos números para indicar dónde debe colocarse cada elemento.
La posición de los elementos de la cuadrícula se puede especificar con el número de líneas de la cuadrícula en los atributos grid-column y grid-row. Si desea que un elemento de cuadrícula abarque la línea de cuadrícula 1 a la línea de cuadrícula 3 verticalmente, debe configurar grid-column: 1 / 3 para el elemento. O configure grid-row: 3 / 5 para hacer que el elemento abarque las líneas de cuadrícula 3 a 5 horizontalmente. Juntas, estas dos propiedades especifican el área de la cuadrícula donde se debe colocar un elemento.
ilustrar
Estas propiedades son en realidad propiedades abreviadas:
grid-column es la abreviatura de grid-column-start y grid-column-end;
grid-row es la abreviatura de grid-row-start y grid-row-end.
La barra inclinada en el medio solo se usa para distinguir dos valores en el atributo abreviado, y los espacios antes y después de la barra inclinada no son obligatorios.
4. Líneas de cuadrícula con nombre
5. grid-templete-áreas
Una imagen de cuadrícula visual se puede dibujar directamente en CSS. Esta declaración proporciona una serie de cadenas entre comillas, cada una de las cuales representa una fila de la cuadrícula, con espacios que separan cada columna.
La propiedad grid-area coloca cada elemento de la grilla en estas áreas nombradas
6. Cuadrícula implícita
Al definir una pista de cuadrícula utilizando las propiedades grid-template-*, se crea una cuadrícula explícita
Las pistas de cuadrícula implícitas tienen un tamaño predeterminado automático, lo que significa que se expanden para ajustarse al contenido del elemento de la cuadrícula. Grid-auto-columns y grid-auto-rows se pueden configurar en el contenedor de cuadrícula para especificar un tamaño para la pista de cuadrícula implícita (p. ej., grid-auto-columns: 1fr )
grid-auto-rows:1fr;
// 为所有的隐式网格行指定一个1fr的大小，每一行拥有相同的高度// grid-auto-flow，它可以控制布局算法的行为。
grid-auto-flow: dense，等价于grid-auto-flow: row dense。（初始值就是row)
grid-auto-flow: column dense;
// dense让算法紧凑地填满网格里的空白，尽管这会改变某些网格元素的顺序。加上这个关键字，小元素就会“回填”大元素造成的空白区域object-fit Una propiedad CSS que especifica cómo debe encajar el contenido de un elemento reemplazable (p. ej.: <img> o <video> ) en su cuadro determinado mediante el alto y el ancho.
La propiedad object-fit nos permite controlar el tamaño de la imagen renderizada dentro del cuadro manteniendo constante el tamaño del cuadro.
object-fit: contain;
object-fit: cover;
object-fit: fill;
// ❑ cover：扩展图片，让它填满盒子（导致图片一部分被裁剪）。
// ❑ contain：缩放图片，让它完整地填充盒子（导致盒子里出现空白）。7. Caso de gráficos complejos:
<!doctype html>
<head>
<style>
:root {
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: inherit;
}
body {
background-color: #709b90;
font-family: Helvetica, Arial, sans-serif;
}
.portfolio {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 1fr; // 将隐式水平网格轨道的大小设置为1fr
grid-gap: 1em;
grid-auto-flow: dense; // 开启紧凑的网格布局算法
}
.portfolio > figure {
display: flex;
flex-direction: column; // 让每个网格元素都成为垂直的flexbox
margin: 0;
}
.portfolio img {
flex: 1; // 用弹性拉伸，让图片填充弹性容器的可用空间
object-fit: cover; // 让渲染的图片填充盒子并且不被拉伸（而是裁掉边缘）
max-width: 100%;
}
.portfolio figcaption {
padding: 0.3em 0.8em;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: right;
}
.portfolio .featured {
// 将特定图片放大，在水平和垂直的方向上各占据两个网格轨道
grid-row: span 2;
grid-column: span 2;
}
</style>
</head>
<body>
<div class="portfolio">
<figure class="featured">
<img src="images/monkey.jpg" alt="monkey" />
<figcaption>Monkey</figcaption>
</figure>
<figure>
<img src="images/eagle.jpg" alt="eagle" />
<figcaption>Eagle</figcaption>
</figure>
<figure class="featured">
<img src="images/bird.jpg" alt="bird" />
<figcaption>Bird</figcaption>
</figure>
<figure>
<img src="images/bear.jpg" alt="bear" />
<figcaption>Bear</figcaption>
</figure>
<figure class="featured">
<img src="images/swan.jpg" alt="swan" />
<figcaption>Swan</figcaption>
</figure>
<figure>
<img src="images/elephants.jpg" alt="elephants" />
<figcaption>Elephants</figcaption>
</figure>
<figure>
<img src="images/owl.jpg" alt="owl" />
<figcaption>Owl</figcaption>
</figure>
</div>
</body>
8. Propiedades del elemento de cuadrícula
justificar-contenido, justificar-elementos, justificar-yo. Estas propiedades controlan la posición horizontal de los elementos de la cuadrícula.
alinear contenido, alinear elementos, alinear uno mismo. Estas propiedades controlan la posición vertical de los elementos de la cuadrícula.
Se acabó lo anterior.
Visite el sitio web Grid by Example . Este sitio contiene una gran cantidad de ejemplos de grillas.