web-dev-qa-db-fra.com

Définir la largeur de colonne sur la longueur du contenu dans la grille CSS

J'ai regardé la documentation mais je n'ai pas trouvé une telle propriété. Je veux adapter toutes les cellules d'une colonne à sa largeur de contenu en utilisant la grille CSS.

Pour le premier cas, je devrais appliquer cette propriété pour le conteneur: grid-template-columns: auto auto;

Mais que dois-je faire pour le deuxième cas?

enter image description here

csscss3css-grid
11
mr.boris

Pour rendre toutes les colonnes "rétrécies pour s'adapter", utilisez un conteneur de grille au niveau en ligne:

article {
  display: inline-grid;
  grid-template-columns: auto auto;
}

/* non-essential demo styles */
article { background-color: black; border: 1px solid black; }
section { background-color: white; border: 1px solid black; }
<article>
  <section>content</section>
  <section>content</section>
  <section>cell3</section>
  <section>cell4</section>
</article>

Pour faire une colonne "rétrécir pour s'adapter", utilisez min-content:

article {
  display: grid;
  grid-template-columns: min-content auto;
}

/* non-essential demo styles */
article { background-color: black; border: 1px solid black; }
section { background-color: white; border: 1px solid black; }
<article>
  <section>content</section>
  <section>content</section>
  <section>cell3</section>
  <section>cell4</section>
</article>

Mais auto avec 1fr fonctionnerait également parce que fr consommerait tout l'espace libre sur la ligne, réduisant autant que possible l'autre colonne:

article {
  display: grid;
  grid-template-columns: auto 1fr;
}

/* non-essential demo styles */
article { background-color: black; border: 1px solid black; }
section { background-color: white; border: 1px solid black; }
<article>
  <section>content</section>
  <section>content</section>
  <section>cell3</section>
  <section>cell4</section>
</article>

Plus d'informations dans les spécifications:

14
Michael_B

Définissez les éléments suivants sur le conteneur de grille:

grid-template-columns: auto 1fr;

Cela définit la largeur de première colonne pour égaler la largeur de l'élément le plus large dans cette colonne, et la largeur de deuxième colonne pour obtenir la largeur restante de la grille.

Pour aligner à droite le contenu de la deuxième colonne, nous pouvons simplement utiliser text-align: right

span:nth-child(2n) {
  text-align: right;
}

div {
  display: grid;
  grid-template-columns: auto 1fr;
}
span {
  padding: 0.5em;
}
span:nth-child(2n) {
  text-align: right;
}
span:nth-child(1) {
  background-color: beige; /* colors for demo */
}
span:nth-child(2) {
  background-color: wheat;
}
span:nth-child(3) {
  background-color: lightgreen;
}
span:nth-child(4) {
  background-color: salmon;
}
<div>
  <span>some content here</span>
  <span>content</span>
  <span>cell3</span>
  <span>cell4</span>
</div>

NB: Définition des largeurs de colonne avec min-content est un peu plus agressif :) et définira la largeur de la colonne à la largeur de le plus grand mot dans la colonne.

div {
  display: grid;
  grid-template-columns: min-content auto;
}
span {
  padding: 0.5em;
}
span:nth-child(2n) {
  text-align: right;
}
span:nth-child(1) {
  background-color: beige;
}
span:nth-child(2) {
  background-color: wheat;
}
span:nth-child(3) {
  background-color: lightgreen;
}
span:nth-child(4) {
  background-color: salmon;
}
<div>
  <span>some content here</span>
  <span>content</span>
  <span>cell3</span>
  <span>cell4</span>
</div>
4
Danield