Créer une mise en page CSS en grille

Question

J'ai besoin de créer une mise en page en utilisant CSS grid comme dans l'image ci-dessous pour les résolutions supérieures à 900px :-

Pour les résolutions inférieures à 900px, j'ai besoin que la mise en page ressemble à ceci

Jusqu'à présent, j'ai essayé ceci :-

.container {
   display: grid;
   grid-template-columns: 250px auto 250px;
   grid-column-gap: 1rem;
 }

Le code ci-dessus crée l'image 1, mais je ne parviens pas à le modifier pour adapter les changements de mise en page pour moins de 900px (image2).

Comment créer cette mise en page en CSS grid afin qu'elle crée la mise en page comme mentionné dans l'image ci-dessus ?

Vous pouvez trouver mon code ici : jsfiddle

Answer 1

grid-template-areas devrait être plus facile à utiliser

.item1 { grid-area: box1; }
.item2 { grid-area: box2; }
.item3 { grid-area: list; }
.item4 { grid-area: box3; }

.grid-container {
  display: grid;
  grid-template-areas:
    'box1 list box3'
    'box2 list box3';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

@media screen and (max-width: 900px) {
    .grid-container {
      grid-template-areas:
        'box1 list'
        'box2 list'
        'box3 list';
    }
}

  Boîte 1
  Boîte 2
  Liste  
  Boîte 3

Answer 2

J'espère que nous pouvons utiliser grid-column-start, grid-column-end, grid-row-start et grid-row-end pour atteindre les grilles requises ainsi que médias.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.box2{
  grid-column-start:1;
  grid-column-end:2;
}
.list1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start:2;
  grid-column-end:3;
}
.box3{
 grid-column-start:3;
 grid-column-end:4;
 grid-row-start:1;
 grid-row-end:2;
}

@media (max-width:900px){
    .grid-container {
      grid-template-columns: auto auto;
    }
    .list1 {
    grid-row-start: 1;
    grid-row-end: 4;
    }
   .box3{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:3;
    grid-row-end:4;
    }

}

Lignes de grille

  1
  2
  3  
  4  

Vous pouvez vous référer aux numéros de lignes lors du placement des éléments de la grille.

Answer 3

J'espère que grid-auto-flow: column aidera ainsi que mediaquery

Fiddle ici

  Boîte 1
  Liste
  Boîte 2 
  Boîte 3

.grid-container {
  display: grid;
  grid-template-columns: 25% 50%;
  grid-gap: 10px;
  grid-auto-flow: column;

  > div {
    border: solid 1px #00f;
    padding: 10px;
  }
}

.item2 {
  grid-row-start: 1;
  grid-row-end:   3;
  grid-column: 2 / 3;
}

@media screen and (max-width: 900px) { 
  .grid-container { 
    grid-template-columns: 25% 1fr ;
  }

.item2 {
    grid-row-end: 4;  
  }
}