¿Qué es Grid?
Una cuadrícula es un conjunto superpuesto de líneas horizontales y verticales: un conjunto define columnas y el otro define filas. Los elementos se pueden colocar en la cuadrícula, según filas y columnas.
Soporte de navegador
El soporte del navegador alcanza el 94% en 2020
Contenedor de rejilla
Creamos un contenedor de cuadrícula declarando display: grid o display: inline-grid en el elemento. Una vez que hacemos esto, todos los hijos directos de este elemento se convierten en elementos de la cuadrícula .
<body>
<div class="row">
<div class="row__item header">
<h1>Header</h1>
</div>
<div class="row__item nav">
<h1>Navbar</h1>
</div>
<div class="row__item article">
<h1>Article</h1>
</div>
<div class="row__item ads">
<h1>Ads</h1>
</div>
</div>
</body>.row {
display: grid;
margin: auto;
grid-template-rows: 60px 1fr ;
grid-template-columns: 20% 1fr 15%;
grid-gap: 10px;
width: 1000px;
height: 1000px;
justify-items: center;
justify-content: space-between;
grid-template-areas:
"header header header"
"nav article ads";
}grid-template-rows es una propiedad de CSS que define los nombres de línea y la ruta de tamaño de la función de filas de cuadrícula.
La propiedad CSS
grid-rowdetermina en qué línea del diseño de cuadrícula comenzará el elemento, cuántas líneas ocupará el elemento o en qué línea terminará el elemento en el diseño de cuadrícula. Esta es una propiedad abreviada para las propiedades grid-row-start y grid-row-end .
La propiedad CSS
grid-gapes una propiedad abreviada de grid-row-gapy grid-column-gapque define los surcos entre las filas y columnas de la cuadrícula.
La propiedad
grid-template-areasdefine la plantilla de cuadrícula refiriéndose a los nombres de área, que se establecen mediante la propiedad grid-area .
La repetición de un nombre de área hace que el contenido abarque esas celdas. Un punto significa una celda vacía. La sintaxis en sí misma proporciona una visualización de la estructura de la cuadrícula.
Usando la propiedad,
grid-areapodemos asignar a cada una de estas áreas su propio nombre. Nombrar áreas aún no crea ningún diseño, sin embargo, ahora tenemos áreas nombradas que podemos usar en él.
.header{
grid-area: header;
}
.nav{
grid-area: nav;
}
.article{
grid-area: article;
}
.ads{
grid-area: ads;
}Cree una plantilla de sitio con CSS Grid:
Cambiar la plantilla
Puede cambiar la plantilla simplemente reasignando las áreas de la cuadrícula en formato
grid-template-areas.
Entonces, si cambiamos a esto:
grid-template-areas:
"nav header header"
"nav article ads";
}
Entonces, como resultado, obtenemos la siguiente plantilla:
Cuadrículas con consultas de medios
Uno de los puntos fuertes de las cuadrículas es que puede crear una plantilla completamente diferente en segundos.
Esto hace que CSS Grid sea ideal para consultas de medios. Simplemente podemos reasignar los valores en gráficos ASCII y envolver el resultado en la consulta de medios final.
@media all and (max-width: 575px) {
.row {
grid-template-areas:
"header"
"article"
"ads"
"nav";
grid-template-rows: 80px 1fr 70px 1fr ;
grid-template-columns: 1fr;
}
}
Como resultado, obtenemos:
Por lo tanto, el objetivo es reasignar los valores en la propiedad
grid-template-areas.
Conclusión
En este artículo, hemos cubierto solo la punta del iceberg del diseño de cuadrícula CSS. A veces es difícil creer qué tipo de cosas puede hacer CSS Grid. Esta es una ruptura en todos los patrones. Y me encanta.
Le aconsejo que preste atención a esta especificación y dedique parte de su tiempo a estudiarla. Créame, en el futuro esto definitivamente será útil y no importa si escribe en React, Angular, Vue (inserte el suyo). Grid's está aquí desde hace mucho tiempo.