web-dev-qa-db-fra.com

Définir la hauteur de la ligne pour l'adapter à la hauteur du contenu dans la grille CSS

J'ai une grille avec deux colonnes et deux lignes. Je dois placer deux éléments de la grille dans une colonne (à droite) et un élément à gauche. Ensuite, je veux que le premier élément de la colonne de droite ait une hauteur maximale égale à sa hauteur de contenu. Comment puis-je accomplir cela?

Le problème auquel je suis confronté en ce moment est que ces deux éléments à droite ont une hauteur de 50% et je ne peux pas trouver un moyen de régler le premier à la hauteur minimale possible et l'autre au reste de la hauteur ( auto).

Juste pour clarifier - la hauteur de chaque élément n'est pas fixe. Ci-dessous, vous pouvez voir à quoi cela ressemble en ce moment.

Une dernière chose, je ne peux pas changer l'ordre des éléments HTML DIV en raison de la conception Web réactive.

.grid{
  display: grid;
  grid-template-columns: auto 300px;
  grid-column-gap: 20px;
  grid-template-areas: "main_content top" "main_content bottom";
}

.left{
  grid-area: main_content;
}

.top_right{
  grid-area: top;
  background: #ffa4a4;
}

.bottom_right{
  grid-area: bottom;
  background: #c7ffae;
}
<div class="grid">
  <div class="top_right">I'm top right</div>
  <div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis. Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero. </div>
  <div class="bottom_right">I'm bottom right</div>
</div>
htmlcsscss-grid
9
instead

Il vous suffit de définir la première ligne sur auto (hauteur du contenu) et la deuxième ligne sur 1fr (consomme l'espace restant).

.grid{
  display: grid;
  grid-template-rows: auto 1fr; /* NEW */
  grid-template-columns: auto 300px;
  grid-column-gap: 20px;
  grid-template-areas: "main_content top" "main_content bottom";
}

.left{
  grid-area: main_content;
}

.top_right{
  grid-area: top;
  background: #ffa4a4;
}

.bottom_right{
  grid-area: bottom;
  background: #c7ffae;
}
<div class="grid">
  <div class="top_right">I'm top right</div>
  <div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis. Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero. </div>
  <div class="bottom_right">I'm bottom right</div>
</div>
14
Michael_B

Vous pouvez utiliser height: fit-content pour garantir que l'élément correspond à la hauteur du contenu contenu dans ... mais notez que la deuxième case conservera toujours sa position d'origine:

.grid{
  display: grid;
  grid-template-columns: auto 300px;
  grid-column-gap: 20px;
  grid-template-areas: "main_content top" "main_content bottom";
}

.left{
  grid-area: main_content;
}

.top_right{
  grid-area: top;
  background: #ffa4a4;
  height: fit-content;
}

.bottom_right{
  grid-area: bottom;
  background: #c7ffae;
}
<div class="grid">
  <div class="top_right">I'm top right</div>
  <div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis. Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero. </div>
  <div class="bottom_right">I'm bottom right</div>
</div>

Bien que je ne sais pas comment faire sauter la deuxième case pour faire correspondre la première avec la disposition de la grille, l'effet souhaité serait assez simple à réaliser si vous êtes prêt à l'utiliser - flexbox.

Ajoutez simplement display: flex à .grid, et créez un nouveau .right contenir .top_right et .bottom_right. Puis éventuellement flex: 1 aux deux .left et .right:

.grid {
  display: flex;
}

.left {
  flex: 1;
}

.right {
  flex: 1;
  background: #c7ffae;
}

.top_right {
  background: #ffa4a4;
  height: fit-content;
}
<div class="grid">
  <div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu
    molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis.
    Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero.</div>
  <div class="right">
    <div class="top_right">I'm top right</div>
    <div class="bottom_right">I'm bottom right</div>
  </div>
</div>

Notez que vous devrez également déplacer le background vert de .bottom_right à .right pour qu'il s'étire sur toute la hauteur.

Cela fonctionnera sur tous les principaux navigateurs .

J'espère que cela t'aides! :)

3
Obsidian Age