Comment faire en CSS éléments de la Grille de prendre de l'espace restant?

J'ai une carte construite avec CSS présentation de la Grille. Il y a peut être une image de la gauche, du texte en haut à droite et peut-être un bouton ou un lien en bas à droite.

Dans le code ci-dessous, comment puis-je faire de la zone verte de prendre autant d'espace que possible, et en même temps faire de la zone bleue de prendre le moins de place possible?

Le vert devrait pousser la zone bleue vers le bas aussi loin que possible.

https://jsfiddle.net/9nxpvs5m/

CSS:

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "one two"
    "one three"
}

.one {
  background: red;
  grid-area: one;
  padding: 50px 0;
}

.two {
  background: green;
  grid-area: two;
}

.three {
  background: blue;
  grid-area: three;
}

HTML:

<div class="grid">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
</div>

Pas de réponse à la question-est, mais peut-être encore de la valeur: je le ferais avec flexbox et un conteneur supplémentaire autour de .two et .three: jsfiddle.net/9nxpvs5m/2

InformationsquelleAutor Jens Törnell | 2017-08-21

Ajoutant grid-template-rows: 1fr min-content; à votre .grid de vous obtenir exactement ce que vous recherchez :).

CSS:

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr min-content;
  grid-template-areas:
    "one two"
    "one three"
}

.one {
  background: red;
  grid-area: one;
  padding: 50px 0;
}

.two {
  background: green;
  grid-area: two;
}

.three {
  background: blue;
  grid-area: three;
}

HTML:

<div class="grid">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
</div>

Jens modifications: Pour une meilleure prise en charge du navigateur ceci peut être utilisé à la place: grid-template-rows: 1fr auto;, au moins dans ce cas précis.

InformationsquelleAutor Kevin Powell

Une grille est une série de l'intersection des lignes et des colonnes.

Vous souhaitez que les deux éléments de la deuxième colonne pour ajuster automatiquement leur hauteur de ligne en fonction de leur contenu en hauteur.

Ce n'est pas une grille de travaux. De telles modifications de la hauteur de ligne dans la deuxième colonne aura aussi une incidence sur la première colonne.

Si vous devez utiliser une Grille CSS, alors ce que je voudrais faire est de donner le conteneur, disons, 12 lignes, alors que les éléments s'étendent de lignes que nécessaire.

CSS:

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: repeat(12, 15px);
}

.one {
  grid-row: 1 / -1;
  background: red;
}

.two {
  grid-row: span 10;
  background: lightgreen;
}

.three {
  grid-row: span 2;
  background: aqua;
}

.grid > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML:

<div class="grid">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

Sinon, vous pouvez essayer un flexbox solution.

CSS:

.grid {
  display: flex;
  flex-flow: column wrap;
  height: 200px;
}

.one {
  flex: 0 0 100%;
  width: 30%;
  background: red;
}

.two {
  flex: 1 0 1px;
  width: 70%;
  background: lightgreen;
}

.three {
  background: aqua;
}

.grid>div {
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML:

<div class="grid">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

J'avais envisagé de le min-contenu, mais cette valeur est faible prise en charge du navigateur. Il n'a pas de travail dans Safari et Firefox lorsque je l'ai testé.

InformationsquelleAutor Michael_B

0

Je suis nouveau sur la grille alors, toutes mes excuses si c'est la réalité.

Une approche possible pourrait être de regroupement two et three ensemble, et à l'aide de flexbox?

CSS:
```
.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "one two"
}

.one {
  background: red;
  grid-area: one;
  padding: 50px 0;
}

.wrap {
  grid-area: two;
  display: flex;
  flex-direction: column;
}

.two {
  background: green;
  flex: 1;
}

.three {
  background: blue;
}
```
HTML:
```
<div class="grid">
  <div class="one">
    One
  </div>
  <div class="wrap">

    <div class="two">
      Two
    </div>
    <div class="three">
      Three
    </div>
  </div>
</div>
```
- Exactement ma ligne de pensée. Flexbox est vraiment ma solution de ces jours. Cependant, il est un peu dommage flexboîte n'est pas réellement flexible assez pour obtenir cette mise en page simple d'aller sans un conteneur supplémentaire autour de .two et .three - ou est-il un moyen?
- Non pas que je pense 🙂
- Je pense que c'est une solution de contournement, je vais donc attendre un certain temps avant d'accepter cela comme une réponse. Une grille seule solution s'il en existe, seront acceptés comme une réponse.
InformationsquelleAutor sol
0

Certainement pas la solution la plus élégante et probablement pas la meilleure pratique, mais vous pouvez toujours ajouter d'autres lignes de
```
"one two"
```
avant la partie où vous avez
```
"one three"
```
de sorte qu'il finit par ressembler à
```
.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "one two"
    "one two"
    "one two"
    "one three"
}
```
Encore une fois, assez sûr que c'est juste un travail autour et il y a de meilleures solutions là-bas... Mais ce n'travail, pour être juste.

InformationsquelleAutor gymnast66x
0

Lors de l'utilisation de la grille, et vous avez de la grille de modèle de domaine utilisé, et si par hasard vous a donné un domaine particulier de largeur, vous êtes de gauche avec un espace de grille fait automatiquement.
Dans cette situation, laissez-grille-modèle-colonnes, soit min-contenu ou max-contenu, afin qu'il ajuste sa position automatiquement.

InformationsquelleAutor dean filigreti

Vous devez vous connecter pour publier un commentaire.