plantilla de cuadrícula Trucos CSS - Trucos CSS

EN grid-template La propiedad CSS está abreviada, lo que le permite definir columnas, filas y áreas de la red en un contenedor de red CSS con una sola declaración.

.grid-container {
  display: grid;
  grid-template:
    "header  header"
    "sidebar main"   1fr
    "footer  footer" min-content
    / 250px   1fr;
}

Propiedades compuestas

Como se mencionó, grid-template es una transcripción que combina muchas propiedades. ¿Qué propiedades, preguntas? Estos son los tres:

Sintaxis

EN grid-template Hay muchas sintaxis disponibles en diferentes sabores, pero se define como:

grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

• Valor inicial: como cada una de las propiedades de la taquigrafía, que es none para todo el mundo.
• Se refiere a: contenedores de celosía
• heredado: no
• Valor estimado: como se indica, pero con longitudes relativas convertidas a longitudes absolutas para grid-template-columns y grid-template-rows Propiedades.
• Tipo de animación: una lista simple de longitud, porcentaje o cálculo, siempre que las únicas diferencias estén en los valores de los componentes de longitud, porcentaje o cálculo en la lista de grid-template-columns y grid-template-rows y discretamente paragrid-template-areas.

Valores

/* Keyword value */
grid-template: none;
grid-template: "col-1 col-2 col-3";
grid-template: "header header header" "sidebar main main";
grid-template:
  "header header header"
  "sidebar main main"
  ". footer footer";

/* grid-template-rows / grid-template-columns values */
grid-template: 100px 1fr / 300px 1fr;
grid-template: min-content 1fr / 200px 1fr 200px;
grid-template: [line1] 100px / [sidebar] 250px [content] 1fr;
grid-template: repeat(4, auto) / repeat(4, minmax(100px, 1fr));

/* grid-template-areas grid-template-rows / grid-template-column values */
grid-template:
  "header header"
  "sidebar main"
  "footer footer";
grid-template:
  "header header header" min-content
  "main main main" 1fr;
grid-template:
  [row1-top] "header header" 100px [row1-bottom]
  "sidebar main" 1fr [row2-bottom] / [col1-start] 300px [col1-end] 1fr;

/* Global values */
grid-template: inherit;
grid-template: initial;
grid-template: revert;
grid-template: unset;

none

Está defecto valor. none establece las tres propiedades en sus valores iniciales, lo que significa que no hay áreas de red con nombre ni rutas de red explícitas que esta propiedad defina en el contenedor de red. Esto también significa que las rutas de red son implícitamente generado y dimensionado por grid-auto-columns y grid-auto-rows Propiedades.

Tenga en cuenta que grid-template La propiedad no es la única forma de crear rutas de red explícitas. Podemos hacer esto con la ayuda de grid-template-columns y grid-template-rows Propiedades.

<'grid-template-rows'> / <'grid-template-columns'>

esta forma de grid-template la sintaxis define filas y columnas en un contenedor de red en una sola declaración al especificar grid-template-areas valor hasta none.Separa los valores con una barra / entre ellos de la siguiente manera:

.grid-container {
  display: grid;
  grid-template: min-content 1fr / 200px 1fr 200px;
}

… Lo que equivale a escribir esto sin taquigrafía:

.grid-container {
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas: none;
}

El orden importa. Los valores antes de la barra inclinada establecida grid-template-rows y los valores después de la barra inclinada establecida grid-template-columns Propiedad.

Aquí hay otro ejemplo donde se usan nombres de línea explícitos en nuestra red:

/* One row of 100px and two columns of 250px and 1fr: */
.grid-container {
  display: grid;
  grid-template: [line1] 100px / [sidebar] 250px [content] 1fr;
}

… Lo cual, nuevamente, es equivalente a escribirlo de esta manera sin taquigrafía:

.grid-container {
  display: grid;
  grid-template-rows: [line1] 100px;
  grid-template-columns: [sidebar] 250px [content] 1fr;
  grid-template-areas: none;
}

[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

EN grid-template la propiedad también adopta una sintaxis que nos permite especificar explícitamente columnas, filas y áreas de la cuadrícula al mismo tiempo.

grid-template:
  "header  header"
  "sidebar main"   1fr
  "footer  footer" min-content
  / 200px   1fr;

header, sidebar, mainy footer son los nombres de las áreas de cuadrícula para un contenedor de cuadrícula. El número de nombres en cada fila determina el número de columnas (que son dos en cada fila en el ejemplo anterior).

Los valores después de las columnas - como 1fr y min-content arriba - representar <track-size> por cada fila. Si no especificamos el tamaño de la canción por línea, como en la primera línea del ejemplo anterior, el tamaño de esta línea se establece en auto.

La última línea del ejemplo contiene una barra inclinada (/), seguido de dos valores de longitud. Establecen las dimensiones de las columnas. Y dado que tenemos dos columnas en cada fila, debemos proporcionar dos tamaños. Ponemos la primera columna a 200px de ancho y la segunda fila para 1fr.

Uso básico

.grid {
  display: grid;
  gap: 1rem;
  grid-template: "header  header"
                  "sidebar main"   1fr
                  "footer  footer" min-content
                / 200px   1fr;
}

El código anterior es equivalente al siguiente:

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr min-content;
  grid-template-areas: "header header"
                        "sidebar main"
                        "footer footer";
}

Y se tiene el siguiente resultado:

Esta es una abreviatura de propiedades de red explícitas, no implícitas.

EN grid-template la propiedad solo adhiere las propiedades explícitas de la red a sus valores originales y no tiene ningún efecto sobre implícitamente implícitamente propiedades de la red como grid-auto-columns, grid-auto-rowsy grid-auto-flowpara esto hay otra abreviatura llamada grid que tiene la misma sintaxis pero también anula las propiedades implícitas de la red.

Esto es lo que sucede cuando configuras grid-template propiedad de none:

grid-template: none;

/* is equivalent to: */
grid-template-rows: none;
grid-template-columns: none;
grid-template-areas: none;

Hay muchas formas de definir líneas de red.

Nombrar líneas web es una forma popular de hacerlas más fáciles de escribir, pero hay varias formas de hacerlo. Una forma es dar a cada línea algunos nombres como una forma de pensar en las cosas que tienen una línea de inicio y final:

.grid {
  grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end];
}

Lo mejor de CSS Grid es que automáticamente numera las cosas para nosotros. Esto significa que podemos descartar números cuando colocamos elementos de cuadrícula en las líneas del contenedor de cuadrícula. Así que en lugar de escribir col1 y col2 como hicimos anteriormente, podemos simplemente escribir col seguido del número de línea que queremos alinear:

.grid-item {
  grid-column-start: col 2;
}

Es aún más genial cuando usamos esta técnica en cuadrículas con mucho de las columnas:

.grid {
  grid-template-columns: repeat(4, [col] 100px);
}

Ahora tenemos cuatro columnas que son 100px de ancho y tienen líneas de cuadrícula numeradas automáticamente con nombres col podemos usar para colocar elementos en la red:

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

por supuesto que tenemos span palabra clave, lo que significa que podemos simplificar las cosas un poco más:

.grid-item {
  grid-column: col 2 / span 2;
}

Aquí hay un ejemplo donde tenemos dos líneas de red. line-1 es la línea de cuadrícula entre la primera y la segunda fila y line-2 es la línea entre la segunda y la última fila.

grid-template:
  "header  header"
  [line-1] "sidebar main" 1fr [line-2]
  "footer  footer" min-content
/ 200px   1fr;

También podemos establecer el tamaño de las líneas de la cuadrícula entre las columnas:

grid-template:
  [row1-top]    "header  header" 100px [row1-bottom]
  [content-top] "sidebar main"   1fr [row2-bottom]
/ [col1-start]  150px    1fr     [col2-end content-end];

Observe cómo el uso de espacios puede ayudar a que el código sea más fácil de leer al alinear las columnas en cada fila.

• línea 1: 100px alto con líneas de red nombradas row1-top y row1-bottom
• línea 2: Ocupa el espacio restante, gracias a 1frcon nombres de líneas de celosía content-top y row2-bottom.
• Columna 1: 150px de ancho con un col1-start nombre de línea
• Columna 2: Ocupa el espacio restante con 1fr y una línea con dos nombres, col2-end publicidad content-end

A veces, una ilustración puede ser útil para ver qué está pasando.

Tenga cuidado al usar repeat() función

No está diseñado para funcionar. s grid-template ¡propiedad! La idea es que repeat() evitará la capacidad de escribir las cosas de forma limpia, donde todo se puede organizar a intervalos, algo así como una simple visualización de la red.

.grid {
  display: grid;
  grid-template: "header  header"
                  "sidebar main"   1fr
                  "footer  footer" min-content
                / 200px   1fr;
}

Demostración

Vamos a crear un diseño de página web personalizado usando grid-template Primero, alguna red CSS predeterminada para una pila de elementos en una columna:

/* Define the grid */
.grid {
  min-height: 100vh;
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "left-sidebar"
    "right-sidebar"
    "footer";     
  gap: 1rem;
}

/* Place the items on the grid */
header {
  grid-area: header;
}

.left-sidebar {
  grid-area: left-sidebar;
}

.right-sidebar {
  grid-area: right-sidebar;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

Genial, genial. Pero lo que realmente queremos es una red 3-3 en pantallas más grandes. Algo como esto:

Entonces, creemos este diseño dentro de una consulta de medios usando grid-template:

@media (min-width: 600px) {
  .grid {
    grid-template:
      "header             header             header"         min-content
      "left-sidebar       main               right-sidebar"  1fr
      "footer             footer             footer"         min-content
    / minmax(auto, 250px) minmax(250px, 1fr) minmax(auto, 250px);
  }
}

Compatibilidad con navegador

Más información

Conectado