Propiedades de Grid

Grid Container
1. display
  1. Define el elemento como un contenedor de grid y establece un nuevo formato de contexto de grid para su contenido.
    1. valores
      1. grid
        display: grid;
      2. inline-grid
2. grid-template-columns
  1. grid-template-rows
    1. Define las columnas y listas del grid con unas listas de valores separados-por-espacios.
      1. valores
        <track-size>
        grid-template-columns: 30% 50%;
        grid-template-rows: 45vh 55vh;
        <line-name>
3. grid-template-areas
  1. Define una grid template usando de referencia los nombres de las grid areas las cuales son especificadas con la propiedad de grid-area.
    1. valores
      1. <grid-area-name>
        header {grid-area: encabezado;} section {grid-area: contenedor;} footer {grid-area: piepagina;} body>div {grid-template-areas: "encabezado encabezado encabezado" "contenedor contenedor contenedor" "piepagina piepagina piepagina";
      2. none
4. grid-gap
  1. Especifica el espacio entre las columnas/las filas.
    1. valores
      1. <grid-row-gap> <grid-column-gap>
        grid-gap: 10px 20px;
5. justify-items
  1. Alinea el contenido horizontalmente.
    1. valores
      1. start
      2. end
      3. center
      4. stretch
        justify-items: stretch;
6. align-items
  1. Alinear contenido verticalmente.
    1. valores
      1. start
        align-items: start;
      2. center
      3. end
      4. stretch
7. justify-content
  1. Alinear todo el grid horizontalmente.
    1. valores
      1. start
      2. end
      3. stretch
      4. center
      5. space-around
        justify-content: space-around;
      6. space-between
      7. space-evenly
8. align-content
  1. Alinear todo el grid verticalmente.
    1. valores
      1. start
      2. center
      3. end
      4. stretch
      5. space-around
      6. space-between
        align-content: space-between;
      7. space-evenly
Introducción
1. CSS Grid Layout es un sistema de layout bidimensional basado en el grid que se dedica a cambiar completamente la manera en la que diseñamos interfaces de usuario basadas en grid.
Basic and Browser Support
1. Para poder comenzar tienes que definir un elemento de container con display: grid; definir los tamaños de las columnas y las filas con grid-template-columns y grid-template-rows, y luego poner a sus elementos hijos en el grid con grid-column and grid-row.
2. Desde marzo del 2017, la mayoría de los navegadores apoyaban no CSS Grid: Chrome (incluyendo Android), Firefox, Safari (incluyendo iOS), y Opera.
Terminología Importante
1. Antes de indagar más sobre el concepto de Grid, es muy importante conocer la terminología
  1. Grid Container
    1. Es el elemento en el cual display: grid es aplicado. Es el padre directo de todos los grid items.
  2. Grid Item
    1. Los hijos (descendientes directos) del grid container.
  3. Grid Line
    1. Las lineas divisoras que hacen la estuctura del grid.
  4. Grid Track
    1. El espacio entre dos lineas de gird adyacentes.
  5. Grid Cell
    1. El espacio entre las lineas de dos filas adyacentes y dos columnas adyacentes
  6. Grid Area
    1. Un espacio total rodeado por cuatro lineas de grid

Nächster

Propiedades de Grid

Beschreibung

Zusammenfassung der Ressource

ähnlicher Inhalt

	Erstellt von Salma Kalife vor mehr als 5 Jahre