greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/spanish/css/layout/grid-layout/index.md

6.4 KiB
Raw Blame History

title localeTitle
Grid Layout Diseño de cuadrícula

Diseño de cuadrícula

CSS Grid Layout, conocido simplemente como Grid, es un esquema de diseño que es el más nuevo y más poderoso en CSS. Es compatible con todos los navegadores principales y proporciona una forma de colocar elementos en la página y moverlos.

Puede asignar automáticamente elementos a áreas , ajustar su tamaño y cambiar su tamaño, encargarse de crear columnas y filas según el patrón que usted defina y realizar todos los cálculos utilizando la unidad fr recién introducida.

¿Por qué Grid?

  • Puede tener fácilmente una cuadrícula de 12 columnas con una línea de CSS. grid-template-columns: repeat(12, 1fr)
  • Grid te permite mover las cosas en cualquier dirección. A diferencia de Flex, donde puede mover elementos horizontalmente ( flex-direction: row ) o verticalmente ( flex-direction: column ), no ambos al mismo tiempo, Grid le permite mover cualquier elemento de la cuadrícula a cualquier área de cuadrícula predefinida en la página. Los elementos que muevas no tienen que ser adyacentes.
  • Con CSS Grid, puede cambiar el orden de los elementos HTML utilizando solo CSS . Mueva algo de arriba a derecha, mueva los elementos que estaban en el pie de página a la barra lateral, etc. En lugar de mover <div> de <footer> a <aside> en el HTML, puede cambiar su ubicación con grid-area de la grid-area en el Hoja de estilo CSS.

Grid vs. Flex

  • Flex es unidimensional, ya sea horizontal o vertical, mientras que Grid es bidimensional, lo que significa que puede mover elementos tanto en planos horizontales como verticales
  • En Grid, aplicamos estilos de diseño al contenedor principal y no a los elementos. Por otro lado, Flex se dirige al elemento flex para establecer propiedades como flex-basis , flex-grow y flex-shrink
  • Grid y Flex no son mutuamente excluyentes. Puedes usar ambos en el mismo proyecto.

Verificando la compatibilidad del navegador con @supports

Lo ideal es que cuando construyas un sitio, lo diseñes con Grid y utilices Flex como alternativa. Puede averiguar si su navegador admite cuadrícula con la regla @support CSS (consulta de características). Aquí hay un ejemplo:

.container { 
  display: grid; /* display grid by default */ 
 } 
 
 @supports not (display: grid) { /* if grid is not supported by the browser */ 
  .container { 
    display: flex; /* display flex instead of grid */ 
  } 
 }

Empezando

Para convertir cualquier elemento en una cuadrícula, debe asignar su propiedad de display a la grid , así:

.conatiner { 
  display: grid; 
 }

Y eso es. Acabas de hacer de tu .container una grilla. Cada elemento dentro del .container se convierte automáticamente en un elemento de cuadrícula.

Definiendo plantillas

Filas y columnas

grid-template-columns: 1fr 1fr 1fr 1fr; 
 grid-template-rows: auto 300px;

Áreas

grid-template-areas: 
  "aaaa" 
  "bcde" 
  "bcde" 
  "ffff";

o

grid-template-areas: 
  "header header header header" 
  "nav main main sidebar";

Áreas de cuadrícula

Aquí hay un código de ejemplo sobre cómo definir y asignar áreas de cuadrícula

.site { 
  display: grid; 
  grid-template-areas: /* applied to grid container */ 
    "head head" /* you're assigning cells to areas by giving the cells an area name */ 
    "nav  main" /* how many values kind of depends on how many cells you have in the grid */ 
    "nav  foot"; 
 } 
 
 .site > header { 
  grid-area: head; 
 } 
 
 .site > nav { 
  grid-area: nav; 
 } 
 
 .site > main { 
    grid-area: main; 
 } 
 
 .site > footer { 
    grid-area: foot; 
 }

La unidad de fr

Grid introduce una nueva unidad fr , que significa fracción . Lo bueno de usar la unidad fr es que se encarga de los cálculos por ti. El uso de fr evita los problemas de margen y relleno. Con % y em etc. se convierte en una ecuación matemática cuando se calcula grid-gap . Si usó la unidad de fr , calculará automáticamente el tamaño de la columna y el de la canaleta y ajustará el tamaño de las columnas en consecuencia, además, tampoco habrá huecos de sangrado al final.

Ejemplos

Cambio del orden de los elementos en función del tamaño de la pantalla.

Digamos que desea mover el pie de página al final en pantallas pequeñas y a la derecha en pantallas más grandes, y hay un montón de otros elementos HTML entre los dos.

La solución simple es cambiar las grid-template-areas la grid-template-areas según el tamaño de la pantalla. También puede cambiar el número de columnas y filas según el tamaño de la pantalla . Esta es una alternativa mucho más limpia y simple al sistema Grid de Bootstrap ( col-xs-8 col-sm-6 col-md-4 col-lg-3 ).

.site { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-areas: 
    "title title" 
    "main header" 
    "main sidebar" 
 } 
 
 @media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */ 
  .site { 
    grid-template-columns: 2fr 1fr 1fr; 
    grid-template-areas: 
      "title title title" 
      "main header header" 
      "main sidebar footer" 
  } 
 }

Vea la Cuadrícula de la pluma CSS por ejemplo - 2 (áreas de cuadrícula + separación de cuadrícula) por Aamnah Akram ( @aamnah ) en CodePen .

Más información: