grid.css

html {
  box-sizing: border-box;
  font-size: 16px;
  font-family: sans-serif;
  scroll-behavior: smooth;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

a[href="#top"] {
  margin: 1rem;
  display: block;
  font-size: 2rem;
  text-align: center;
  text-decoration: none;
}

p {
  margin: 0;
}

h2 {
  margin-top: 50vh;
  text-align: center;
}

img {
  margin: auto;
  display: block;
  max-width: 100%;
  height: auto;
}

.menu {
  margin-bottom: 100vh;
  font-size: 125%;
}

.menu li {
  margin-bottom: 1rem;
}

.container {
  margin: 0 auto;
  width: 80%;
  height: 80vh;
  background-color: #222;
  border: medium solid #000;
}

.item {
  padding: 1rem;
  font-size: 1.25rem;
  background-color: #666;
  border: medium solid #999;
}

.sub-item {
  padding: 1rem;
  background-color: #ddd;
  border: medium solid #ccc;
}

.grid-explicit {
  display: grid;
  /* Grid de 3cx3r */
  grid-template-columns: 50% 100px 1fr;
  grid-template-rows: 2rem 20vh 30%;
  /* Grid de 5cx4r */
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: repeat(4, auto);
  grid-template-rows: repeat(4, 25%);
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  /* Grid de 4cx5r */
  grid-template-columns: 20% repeat(2, 30%) 20%;
  grid-template-rows: repeat(5, auto);
  grid-column-gap: 2rem;
  column-gap: 4rem;
  grid-row-gap: 1rem;
  row-gap: 2rem;
  /* gap: row column */
  grid-gap: 100px 0px;
  gap: 1vh 1vw;
  gap: 0;
}

.grid-explicit .item:nth-child(10) {
  color: cyan;
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row: 2 / 3;
  grid-column: 3 / 5;
  /* grid-area: grid-row-start / grid-row-end / grid-column-start / grid-column-end; */
  grid-area: 2 / 3 / 3 / 5;
}

.grid-explicit .item:nth-child(12) {
  color: cyan;
  grid-row: span 2;
  grid-column: span 3;
}

.grid-explicit .item:nth-child(15) {
  color: cyan;
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;
}

.grid-line-names {
  display: grid;
  /* Grid de 3cx3r */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: [linea-c1] 1fr [linea-c2] 1fr [linea-c3] 1fr [linea-c4];
  grid-template-rows: [linea-r1] 1fr [linea-r2] 1fr [linea-r3] 1fr [linea-r4];
  grid-template-rows: [linea-r1] auto [linea-r2] auto [linea-r3] auto [linea-r4];
}

.grid-line-names .item:nth-child(3) {
  color: cyan;
  grid-row: linea-r3 / linea-r4;
  grid-column: linea-c1 / linea-c4;
  /* grid-area: linea-r3 / linea-r4 / linea-c1 / linea-c4; */
}

.grid-areas {
  display: grid;
  /* Grid de 2cx3r */
  grid-template-columns: 1fr 200px;
  grid-template-rows: 100px repeat(2, 1fr) 60px;
  grid-template-areas:
    "header   header"
    "content  sidebar"
    "content  ."
    "footer     footer";
}

.header {
  grid-area: header;
}

.content {
  grid-area: content;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

.grid-implicit {
  width: 40%;
  display: grid;
  display: inline-grid;
  /* Grid de 4cx3r */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 200px);
}

.grid-flow {
  display: grid;
  /* Grid de 5cx3r */
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 150px);
  grid-auto-flow: row;
  grid-auto-rows: 100px;
  grid-auto-flow: column;
  grid-auto-columns: 50px;
}

.grid-flow-dense {
  display: grid;
  /* Grid de 5cx4r */
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 200px);
  grid-auto-flow: row dense;
  grid-auto-flow: column dense;
}

/* .grid-flow-dense .item:nth-child(9) {
  color: cyan;
  grid-row: span 3;
  grid-column: span 3;
} */

.grid-flow-dense .item:nth-child(11) {
  color: cyan;
  grid-row: span 3;
  grid-column: span 3;
}

.grid-layers {
  display: grid;
  /* Grid de 4cx4r */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.grid-layers .item:nth-child(1) {
  background-color: #dbea33;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.grid-layers .item:nth-child(2) {
  background-color: #497af8;
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}

.grid-layers .item:nth-child(3) {
  background-color: #90e971;
  grid-column: 1 / 3;
  grid-row: 3 / 5;
}

.grid-layers .item:nth-child(4) {
  background-color: #f0952a;
  grid-column: 3 / 5;
  grid-row: 3 / 5;
}

.grid-layers .item:nth-child(5) {
  background-color: #c92af0;
  opacity: 0.75;
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

.grid-order {
  display: grid;
  /* Grid de 3cx2r */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.grid-order .item:nth-child(1) {
  /* default es 0, valores negativos y positivos */
  order: 1;
}

.grid-order .item:nth-child(2) {
  order: 2;
}

.grid-order .item:nth-child(5) {
  order: -1;
}

.grid-align {
  display: grid;
  /* Grid de 3cx2r */
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(2, 200px);
  /* justify-items alinea mis elementos grid en el eje horizontal (X) */
  justify-items: stretch;
  justify-items: start;
  justify-items: end;
  justify-items: center;
  /* justify-items alinea mis elementos grid en el eje vertical (Y) */
  align-items: stretch;
  align-items: start;
  align-items: end;
  align-items: center;
}

.grid-align .item:nth-child(4) {
  justify-self: start;
  align-self: start;
}

.grid-align-tracks {
  display: grid;
  /* Grid de 3cx2r */
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(2, 200px);
  /* justify-content alinea los tracks de la grid en el eje horizontal (X) */
  justify-content: start;
  justify-content: end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
  /* align-content alinea los tracks de la grid en el eje vertical (Y) */
  align-content: start;
  align-content: end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: space-evenly;
}

.grid-min-max {
  display: grid;
  /* Grid de 4cx?r */
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: repeat(4, minmax(100px, 200px));
  grid-template-columns: repeat(4, minmax(min-content, 200px));
  grid-template-columns: repeat(4, minmax(100px, min-content));
  grid-template-columns: repeat(4, minmax(100px, max-content));
  grid-template-columns: repeat(4, minmax(max-content, 200px));
  grid-template-columns: repeat(4, minmax(min-content, max-content));
}

.grid-repeat {
  display: grid;
  /* Grid de 4cx4r */
  grid-template-columns: repeat(4, 10% 20% 30% 40%);
  grid-template-columns: repeat(3, 10% 20% 30% 40%);
  grid-template-columns: repeat(2, 10% 20% 30% 40%);
  grid-template-columns: repeat(1, 10% 20% 30% 40%);
  grid-template-rows: repeat(2, 100px 200px);
  grid-auto-rows: 150px;
}

.grid-dynamics {
  display: grid;
  /* Grid de 4cx?r */
  grid-template-columns: repeat(4, 100px);
  /* auto-fill Rellena la grid con tracks generados dinámicamente */
  grid-template-columns: repeat(auto-fill, 100px);
  /* auto-fit Ajusta la grid con los tracks existentes */
  grid-template-columns: repeat(auto-fit, 100px);
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-responsive {
  display: grid;
  /* Grid de ?cx?r */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-nested {
  display: grid;
  /* Grid de 3cx?r */
  grid-template-columns: repeat(3, 1fr);
}

.grid {
  display: grid;
  /* Grid de 3cx4r */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.subgrid {
  /* Para que la característica de subgrid funcione es necesario hacer los siguiente:
    1) Definir explícitamente el tamaño que ocupará el elemento que aplicará subgrid dentro del contenedor padre grid, es decir definir sus propiedades grid-column y grid-row.
    2) Aplicar display grid al elemento que aplicará subgrid.
    3) Aplicar el valor de subgrid a las columnas, a las filas o ambas depende de cómo se requiera */
  grid-column: span 3;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}