For more information on this layout, see our article: Grid Layout.
We will look at the basic features of Grid Layout first and then explore how to create a simple grid system for your project.
Change the Grid Layout field.
In the introduction to that section are details of what the specification expects browsers to do when the content is visually reordered using Grid Layout.
En introduction, on peut lire ce qui est attendu de la part des navigateurs lorsque le contenu est réordonné visuellement avec une grille CSS.
The nice thing about using CSS Grid Layout is that you should be able to move an item in the source to match the logical order, without needing to make big changes to your layout.
Les grilles CSS ont cela de pratique qu'elles permettent de déplacer un élément dans le document source sans qu'il soit nécessaire de modifier profondément les règles de style.
The following live sample uses CSS Grid Layout to create a layout that has as many columns of at least 200 pixels as will fit, distributing the extra space between all columns.
Dans l'exemple qui suit, on utilise une grille CSS composée d'autant de colonnes de 200 pixels de large que possible et on distribue l'espace restant entre chaque colonne.
As is noted in the CSS Grid Layout specification, this is quite often going to give you a good structure for your smallest screen devices too.
Comme indiqué dans la spécification, cette structure de base doit également fournir une bonne structure pour les petits écrans.
When working with alignment in CSS Grid Layout, the axis down which columns run is known as the block, or column, axis.
Lorsque vous travaillez avec l'alignement dans les grilles CSS, l'axe vers le bas duquel les colonnes s'exécutent est connu comme l'axe de colonne (ou bloc).
When working with alignment in CSS Grid Layout, the axis along which rows run is known as the inline, or row, axis.
Lorsque vous travaillez avec l'alignement dans une grille, l'axe le long duquel les lignes sont exécutées est appelé l'axe de ligne ou en ligne.
CSS Grid Layout is a two-dimensional layout method enabling the laying out of content in rows and columns.
La grille CSS est une méthode de mise en page bidimensionnelle permettant une présentation du contenu en lignes et colonnes.
A grid column is a vertical track in a CSS Grid Layout, and is the space between two vertical grid lines.
Une colonne de grille est une piste verticale dans une grille CSS, et est l'espace entre deux lignes de grille verticales.
Using the value grid or inline-grid on an element turns it into a grid container using CSS Grid Layout, and any direct children of this element become grid items.
Utiliser la valeur grid ou inline-grid sur un élément le transforme en un conteneur de grille utilisant CSS Grid Layout, et les enfants directs de celui-ci deviennent un élément de cette grille.
Have a play with the code examples, and then move onto the next part of this guide where we will really start to dig into the detail of CSS Grid Layout.
Essayez de jouer avec les exemples, avant de passer aux parties suivantes de ce guide pour commencer à vraiment plonger dans le détail de la CSS Grid Layout.