Ya conoces flexbox, del tutorial anterior: es para acomodar cosas en una sola dirección, como una fila de tarjetas. grid es para cuando necesitas controlar filas y columnas al mismo tiempo —el layout completo de una página, con encabezado, menú lateral y contenido—.

No compiten: la mayoría de los sitios reales usan grid para la estructura grande, y flexbox para acomodar cosas dentro de cada parte.

You already know flexbox from the previous tutorial: it is for arranging things in one direction, like a row of cards. grid is for when you need to control rows and columns at the same time — a whole page layout, with a header, a side menu and content.

They are not competitors: most real sites use grid for the big structure, and flexbox to arrange things inside each part.

display: grid convierte un elemento en una cuadrícula. grid-template-columns define cuántas columnas hay y qué ancho tiene cada una. gap es el espacio entre celdas —sin necesitar márgenes sueltos—.

display: grid turns an element into a grid. grid-template-columns defines how many columns there are and how wide each one is. gap is the space between cells — no loose margins needed.

La parte más clara de grid: le pones nombre a cada zona, y dibujas el layout completo como si fuera un mapa de texto. Cada elemento se ubica diciendo a qué zona pertenece.

The clearest part of grid: you give each zone a name, and draw the whole layout as a text map. Each element is placed by saying which zone it belongs to.

Fíjate que grid-template-areas literalmente se ve como el layout: dos columnas, el encabezado ocupando ambas arriba, y el menú al lado del contenido abajo. Es CSS que se explica solo.

Notice how grid-template-areas literally looks like the layout: two columns, the header spanning both on top, and the menu next to the content below. It is CSS that explains itself.

repeat(auto-fit, minmax(...)) es el truco más usado de grid: crea todas las columnas que quepan, con un ancho mínimo, y las manda a la fila siguiente solas cuando ya no caben —sin escribir una sola @media—.

repeat(auto-fit, minmax(...)) is grid's most used trick: it creates as many columns as fit, with a minimum width, and wraps them to the next row on their own once they no longer fit — without writing a single @media.

display: grid, columnas con fr, layouts nombrados con grid-template-areas, y grids responsive con auto-fit y minmax.

Entre flexbox y grid ya puedes armar el layout de cualquier página. Falta que se vea bien en cualquier pantalla.

display: grid, columns with fr, named layouts with grid-template-areas, and responsive grids with auto-fit and minmax.

Between flexbox and grid you can now build the layout of any page. Next, making it look right on any screen.