web-dev-qa-db-fra.com

Extension pour remplir l'espace restant dans une disposition de grille CSS

Je veux utiliser la grille CSS et ce qui suit est une maquette de l'objectif: enter image description here

Je construis une interface qui devrait s'étendre vers la droite pour remplir l'écran du navigateur; mon code actuel fait que la colonne 2 de la grille externe soit aussi large que le navigateur en plus de la colonne 1; ou peut-être que l'un de ses enfants est à l'origine de cela et qu'il s'agrandit simplement pour s'adapter. Quoi qu'il en soit, cela déborde horizontalement de la page

Donc le code:

#main {
  width: 100%;
  display: grid;
  grid-template-columns: 250px 100%;
  grid-template-rows: 100px 100%;
}

#col-2-outer {
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: 100%;
}

#row-1-inner {
  grid-column: span 2;
}

#col-2-inner table {
  width: 100%;
}
<div id="main">
  <div id="col-1-outer"></div>
  <div id="col-2-outer">
    <div id="row-1-inner"></div>
    <div id="row-2-inner">
      <div id="col-1-inner"></div>
      <div id="col-2-inner">
        <table></table>
      </div>
    </div>
  </div>
</div>

Pour info, pour l'instant, j'ai abandonné les zones de modèles jusqu'à ce que j'obtienne une poignée sur les bases (sauf si cela résout en quelque sorte mon problème mais je suppose que c'est strictement une fonctionnalité d'organisation de code?).

htmlcssalignmentcss-grid
8
Jonline

Le 100% pour la 2e colonne de votre grid-template-columns est basé sur la largeur du conteneur - plutôt que d'occuper l'espace restant dans le conteneur, il se déplacera vers la droite car la 2e colonne essaie de faire correspondre la largeur du conteneur.

Essayez de changer cela en auto et cela devrait corriger le problème, car cela ne prendra de l'espace que jusqu'à la fin du conteneur et pas plus loin.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

4
DKyleo

Je suggère de changer votre balisage avec une grille 3x2 comme ci-dessous:

  1. Supprimez la structure hiérarchique comme vous l'avez dans votre code et ajoutez l'élément one pour chaque section de la grille.

  2. Notez que dans la règle grid-template-columns: 250px 150px auto, 250px est la largeur de votre col-1-outer et 150px est la largeur du col-1-inner.

  3. Span le premier colonne sur les deux lignes en utilisant grid-row: span 2

  4. Span le premier ligne dans le second colonne en utilisant grid-column: span 2.

  5. Étendez le table sur le dernier élément de la grille en utilisant 100% de largeur et de hauteur.

Voir la démo ci-dessous:

* {
  border: 1px solid; /* For illustration */
}

#main {
  width: 100%;
  display: grid;
  grid-template-columns: 250px 150px auto;
  grid-template-rows: 100px auto;
}

#col-1-outer {
  grid-row: span 2;
}

#row-1-inner {
  grid-column: span 2;
}

#col-2-inner table {
  width: 100%;
  height: 100%;
}
<div id="main">
  <div id="col-1-outer">col-1-outer</div>
  <div id="row-1-inner">col2-row-1-inner</div>
  <div id="col-1-inner">col2-row2-inner</div>
  <div id="col-2-inner">
    <table><tr><td>table</td></tr></table>
  </div>
</div>
4
kukkuz