web-dev-qa-db-fra.com

Créer une table avec une grille CSS

J'essaie de créer un tableau à l'aide d'une grille CSS, avec des colonnes égales basées sur le contenu. Je veux éviter d'utiliser <table>. Voici une suite à cette question: Ajustement automatique des colonnes avec une grille CSS

Ce que j'essaie de réaliser:

 enter image description here

Ce tableau fonctionne: https://codepen.io/anon/pen/baExYw

Mais je veux envelopper chaque ligne dans une div, ce qui, sans surprise, brise la table.

Ce tableau est cassé: https://codepen.io/anon/pen/qpbMgG

app.html

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>
</div>

app.css

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, auto);
  background-color: #fff;
  color: #444;
  max-width:  800px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

CSS Grid étant très nouveau pour moi, je n'arrive toujours pas à comprendre comment la moitié de ces éléments fonctionnent en coulisse.

Toute aide est appréciée. Merci d'avance.

htmlcsscss3css-grid
3
realph

Dans votre premier exemple , vos cellules de données sont des enfants du conteneur. Par conséquent, les propriétés de grille - qui ne fonctionnent qu'entre parent et enfant - fonctionnent comme prévu.

Dans votre second exemple , vous avez des cellules de données qui sont des enfants de conteneurs .row. Ces cellules ne sont plus des enfants de .wrapper, le conteneur de grille. Par conséquent, ces cellules n'entrent pas dans le champ d'application de la grille, ne reconnaissent pas les propriétés de la grille et sont rendues sous forme d'éléments standard au niveau du bloc.

Donc, fondamentalement, les conteneurs de grille avec différents éléments enfants affichent différentes dispositions.

Une solution pour faire correspondre vos exemples serait de transformer les éléments de la grille en conteneurs de la grille ayant les mêmes propriétés que le parent. Voici l'idée générale:

Codepen révisé

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  background-color: #fff;
  color: #444;
  max-width: 800px;
}

.row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
}

div:nth-child(4) { grid-row-start: 2; }
div:nth-child(5) { grid-row-start: 3; }

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>
</div>

5
Michael_B

Il ne s'est pas cassé, il fonctionne exactement comme prévu . Chaque élément enfant utilise une cellule de la grille, si vous encapsulez votre en-tête dans une autre division, vous verrez qu'elles échangent des lignes pour des colonnes, car chaque groupe en utilisera une. cellule.

Si vous souhaitez afficher des données tabulaires, vous devez vous en tenir aux tableaux car ils constituent l’élément sémantiquement correct à cette fin.

Cependant, si vous essayez de créer des conceptions réactives ou si vous voulez vraiment utiliser la grille, je vous suggère de lire ceci incroyable article sur les grilles CSS. 

Regardez dans display: subgrid; c'est peut-être ce que vous recherchez dans ce scénario.

0
Francis Schiavo