web-dev-qa-db-fra.com

Chevauchement d'éléments dans la grille CSS

J'essaie de faire une mise en page réactive avec une grille CSS en obtenant que deux éléments se chevauchent à mi-chemin. Sur les écrans larges, ils sont sur une ligne et se chevauchent horizontalement, mais sur les écrans étroits, ils doivent être dans une colonne et se chevaucher verticalement.

Voici une illustration de ce que j'essaie de réaliser:

enter image description here

Ce comportement est-il possible avec la grille CSS? Voici jusqu'où je suis arrivé mais maintenant je suis coincé à essayer d'obtenir le chevauchement vertical.

CSS

.wrapper {
  background: white;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(444px, 1fr));
}

.wrapper__red, .wrapper__green {
  align-self: center;
}

.wrapper__red {
  z-index: 1;
  background: red;
}

.wrapper__green {
  justify-self: end;
  height: 100%;
  background: green;
}

HTML

<div class="wrapper">
  <h1 class="wrapper__red">Title text goes here</h1>
  <img class="wrapper__green" src="/a.jpg" />
</div>
htmlcsscss-grid
7
Fanus du Toit

Dans CSS Grid, vous pouvez créer des zones de grille qui se chevauchent.

Grid rend cela simple et facile avec le placement basé sur les lignes .

D'après les spécifications:

8.3. Placement basé sur la ligne

Le grid-row-start, grid-column-start, grid-row-end, et grid-column-end Les propriétés déterminent la taille et l'emplacement d'un élément de grille dans la grille en contribuant une ligne, une étendue ou rien (automatique) à son emplacement dans la grille, spécifiant ainsi le début en ligne, le début du bloc, la fin en ligne et la fin du bloc bords de sa zone de grille.

remarque: redimensionnez la démo ci-dessous pour passer de la vue bureau à la vue mobile

article {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

section:nth-child(1) { grid-column: 1 / 4; grid-row: 1; z-index: 1; }
section:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
section:nth-child(3) { grid-column: 5 / 7; grid-row: 1; }

@media ( max-width: 500px ) {
   article { grid-template-columns: 100px; justify-content: center; }
   section:nth-child(1) { grid-row: 1 / 4; grid-column: 1; }
   section:nth-child(2) { grid-row: 3 / 5; grid-column: 1; }
   section:nth-child(3) { grid-row: 5 / 7; grid-column: 1; }
}

/* non-essential demo styles */
section:nth-child(1) { background-color: lightgreen; }
section:nth-child(2) { background-color: orange; }
section:nth-child(3) { background-color: aqua; }
section {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
}
<article>
  <section><span>1</span></section>
  <section><span>2</span></section>
  <section><span>3</span></section>
</article>

démo jsFiddle

8
Michael_B