MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Grid

Traducción en curso

CSS grid es definida usando el valor grid en la propiedad display; puedes definir el numero de columnas y filas usadas en tu maquetación con las propiedades  grid-template-rows y grid-template-columns .

La maquetación que defines usando estas propiedades es es descrita como cuardricula explicita.

If you place content outside of this explicit grid, or if you are relying on auto-placement and the grid algorithm needs to create additional row or column tracks to hold grid items, then extra tracks will be created in the implicit grid. The implicit grid is the grid created automatically due to content being added outside of the tracks defined.

In the example below I have created an explicit grid of three columns and two rows. The third row on the grid is an implicit grid row track, formed due to their being more than the six items which fill the explicit tracks.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
</div>

Learn More

Property reference

Further reading

Etiquetas y colaboradores del documento

 Colaboradores en esta página: welm
 Última actualización por: welm,