Grid

Conceptos

• container: define la cuadrícula.
• item: cada elemento hijo.
• grid cell: cada cuadro o unidad mínima de la cuadrícula.
• grid area: conjunto de celdas.
• grid track: conjunto total horizontal o vertical de celdas.
• grid line: línea separadora entre celdas.

Asignar número de filas y columnas

• grid-template-columns: número de columnas.
• grid-template-rows: número de filas.

.grid-container-33{
  display:grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
}
.grid-item{
  border: solid black 1px;
  color: orange;
  background-color:darkslateblue;
}

<div class="grid-container-33">
<div class="grid-item">auto x auto</div>
<div class="grid-item">auto x auto</div>
<div class="grid-item">auto x auto</div>
<div class="grid-item">auto x auto</div>
<div class="grid-item">auto x auto</div>
<div class="grid-item">auto x auto</div>
<div class="grid-item">auto x auto</div>
<div class="grid-item">auto x auto</div>
<div class="grid-item">auto x auto</div>
</div>

• fr: asigna según el espacio libre.

gap

gap es un shorthand de row-gap y column-gap.

• row-gap: espacio entre filas.
• column-gap: espacio entre columnas.

<div class="grid-container-33" style="row-gap: 5px"></div>

<div class="grid-container-33" style="column-gap: 5px"></div>

<div class="grid-container-33" style="gap: 5px 5px"></div>

grid-row y grid-column

• grid-row: asigna al item el número de filas que ocupará.
• grid-column: asigna al item el número de columnas que ocupará.

con span más un número indicamos en que fila o columna queremos acabar. 1 / 3 (des de la línea 1 hasta la 3) = 1 / span 2 (des de la fila/columna 1 más 2)

<div class="grid-container-33">
  <div class="grid-item" style="grid-column: 1/last; background-color:tomato">
    grid-column: 1/last
  </div>
  <div
    class="grid-item"
    style="grid-column: 1/3; grid-row:2/4; background-color:crimson"
  >
    grid-column: 1/3; grid-row:2/4
  </div>
  <div
    class="grid-item"
    style="grid-column: 3/ span 2; background-color: orange;"
  >
    grid-column: 3/ span 2;
  </div>
  <div class="grid-item">auto x auto</div>
  <div class="grid-item">auto x auto</div>
  <div class="grid-item">auto x auto</div>
  <div class="grid-item">auto x auto</div>
  <div class="grid-item">auto x auto</div>
  <div class="grid-item">auto x auto</div>
</div>

repeat(cantidad, medida)

Se utiliza como medida para repetir tamaños

.grid-container-33-repeat {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}

auto-fill y auto-fit

Estas dos propiedades generan tantas columnas como quepan en el contenedor, la diferencia es que auto-fill si tiene espacio libre pero no suficiente para otra columna no añadirá nada, en cambio, auto-fit si que ocupará ese espacio.

auto-fill

<div style="display:grid; grid-template-columns: repeat(auto-fill, 100px);">
  <div class="grid-item" style="background-color: gold">100px</div>
  <div class="grid-item" style="background-color: orange">100px</div>
  <div class="grid-item" style="background-color: tomato">100px</div>
  <div class="grid-item" style="background-color: crimson">100px</div>
  <div class="grid-item" style="background-color: lightcoral">100px</div>
  <div class="grid-item" style="background-color: plum">100px</div>
  <div class="grid-item" style="background-color: skyblue">100px</div>
  <div class="grid-item" style="background-color: lightgreen">100px</div>
</div>

auto-fit

<div style="display:grid; grid-template-columns: repeat(auto-fit, 100px);">
  <div class="grid-item" style="background-color: gold">100px</div>
  <div class="grid-item" style="background-color: orange">100px</div>
  <div class="grid-item" style="background-color: tomato">100px</div>
  <div class="grid-item" style="background-color: crimson">100px</div>
  <div class="grid-item" style="background-color: lightcoral">100px</div>
  <div class="grid-item" style="background-color: plum">100px</div>
  <div class="grid-item" style="background-color: skyblue">100px</div>
  <div class="grid-item" style="background-color: lightgreen">100px</div>
</div>

Como puedes observar no se aprecian diferencias, para poder ver diferencias debemos añadir la propiedad minmax()

auto-fit, minmax(75px, 1fr)

<div
  style="display:grid; grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));"
></div>

auto-fill, minmax(75px, 1fr)

<div
  style="display:grid; grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));"
></div>

grid-template-areas

Es un método para definir las columnas y filas, consiste en asignar por nombres cada parte. En primer lugar asignamos el formato del contenedor:

.grid-container-areas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas:
    "header header header header"
    "sidebar-left main main sidebar-right"
    "footer footer footer .";
  /* El "." asigna espacio en blanco */
}

Y de la misma forma que antes debemos asignar con grid-area un item a cada zona:

.header {
  grid-area: header;
  background-color: lightcoral;
}
.sidebar-left {
  grid-area: sidebar-left;
  background-color: plum;
}
.sidebar-right {
  grid-area: sidebar-right;
  background-color: lightgreen;
}
.main {
  grid-area: main;
  background-color: skyblue;
}
.footer {
  grid-area: footer;
  background-color: crimson;
}

grid-template

Es un shorthand de las propiedades grid-template-columns, grid-template-rows y grid-template-areas. Tendremos que asignar el espacio con el nombre de cada uno y después de las comillas añadimos el tamaño de esa fila, por último añadiremos después de la barra "/" el tamaño de cada columna. Igual que antes debemos de añadir los items dentro del contenedor y asignar el espacio.

.grid-container-template {
  display: grid;
  grid-template:
    "header header header header" 100px
    "sidebar-left main main sidebar-right" 100px
    "footer footer footer ." 100px
    / 1fr 1fr 1fr 1fr;
}

align-items

stretch (default) | center | start |end

Alinea los items en el eje vertical.

stretch

center

start

end

justify-items

stretch (default) | center | start |end

stretch

center

start

end