web-dev-qa-db-fra.com

Modifier l'ordre des colonnes dans une grille CSS

Je joue avec les grilles CSS.

Lorsque je le visualise sur une taille de bureau (min-width: 769px) J'ai une seule ligne avec 3 colonnes - quelque chose comme ceci:

---------------------------------------------
|   col 1     |         col 2       | col 3 |
|             |                     |       |
---------------------------------------------

Puis-je avec css-grid déplacer les colonnes pour pouvoir faire quelque chose comme ça sur une mise en page mobile:

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

Je sais que je couvre des cellules avec quelque chose comme ceci:

.content{
  grid-column: 1 / span2;
}

Mais je veux changer l'ordre des colonnes. Puis-je le faire sans pré-processeur?

Voici ma classe de grille actuelle:

.my-grid {
   display:grid;
   grid-template-columns: 15% 1fr 25% ;
   grid-template-rows: 1fr; /* for as many rows as you need */
   grid-gap: 10px;
   border: 2px solid #222;
   box-sizing: border-box;
}
htmlcsscss-grid
13
jwknz

La disposition de la grille propose plusieurs méthodes pour réorganiser les éléments de la grille. J'en ai énuméré trois ci-dessous.

Voici la disposition originale:

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}
<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

Démo jsFiddle 1

1. grid-template-areas

La propriété grid-template-areas Vous permet d'organiser votre mise en page en utilisant ASCII art visuel.

Placez les noms de zone de grille (définis pour chaque élément) à l'endroit où vous souhaitez qu'ils apparaissent.

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
  grid-template-areas: "column-1 column-2 column-3";
}

grid-item:nth-child(1) { grid-area: column-1; }
grid-item:nth-child(2) { grid-area: column-2; }
grid-item:nth-child(3) { grid-area: column-3; }

@media ( max-width: 500px ) {  
  grid-container { 
        grid-template-columns: 1fr 1fr; 
        grid-template-areas: " column-1 column-3 " 
                             " column-2 column-2 ";
   }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}
<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

démo jsFiddle 2

référence spec:

7.3. Zones nommées: la propriété grid-template-areas

Cette propriété spécifie zones de grille nommées, qui ne sont associées à aucun élément de grille particulier, mais peuvent être référencées à partir du propriétés de placement de la grille.

La syntaxe de la propriété grid-template-areas Fournit également une visualisation de la structure de la grille, facilitant la compréhension de la disposition générale du conteneur de grille.

Toutes les chaînes doivent avoir le même nombre de colonnes, sinon la déclaration n'est pas valide.

Si une zone de grille nommée s'étend sur plusieurs cellules de grille, mais que ces cellules ne forment pas un seul rectangle rempli, la déclaration n'est pas valide.

Remarque: les régions non rectangulaires ou déconnectées peuvent être autorisées dans une future version de ce module.

2. Placement en ligne

Utilisez grid-row-start, grid-row-end, grid-column-start, grid-column-end Ou leurs raccourcis, grid-row Et grid-column, Pour définir un taille et emplacement de l'élément de grille dans la grille.

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

@media ( max-width: 500px ) {  
  grid-container         { grid-template-columns: 1fr 1fr;  }
  grid-item:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 2; }
  grid-item:nth-child(2) { grid-row: 2 / 3; grid-column: 1 / 3; }
  grid-item:nth-child(3) { grid-row: 1 / 2; grid-column: 2 / 3; }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}
<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

Démo jsFiddle 3

référence spec:

8.3. Emplacement basé sur une ligne: les propriétés grid-row-start, grid-column-start, grid-row-end Et grid-column-end

3. order

La propriété order dans Grid Layout fait la même chose que dans Flex Layout.

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

@media ( max-width: 500px ) {  
  grid-container         { grid-template-columns: 1fr 1fr;  }
  grid-item:nth-child(1) { order: 1; }
  grid-item:nth-child(2) { order: 3; grid-column: 1 / 3; }
  grid-item:nth-child(3) { order: 2; }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}
<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

Démo jsFiddle 3

référence spec:

6.3. Éléments de grille réorganisés: la propriété order

21
Michael_B