3
votes

CSS: aligner l'en-tête de la grille avec les éléments de la grille

J'essaye de créer une disposition de grille en CSS. Je veux mettre un en-tête au-dessus de la grille. Je veux que le bord gauche de l'en-tête s'aligne avec le bord gauche du premier élément de la grille. J'ai créé un extrait de ma grille. Voyez comment lorsque vous faites glisser le conteneur de la grille pour le redimensionner, la largeur entre les éléments de la grille et le bord du conteneur n'est pas la même.

Comment aligner mon en-tête sur le bord le plus à gauche des éléments de la grille? >

Modifier: je veux que les éléments de la grille soient centrés lorsqu'il y a un espace horizontal supplémentaire. Le paramètre justify-content: left; n'est pas la solution.

<div class="page">
  <p>Grid Header</p>
  <div class="grid">
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
  <div>
</div>

.page {
  min-width: 300px;
  background: lightgray;
  padding: 12px;
  resize: horizontal;
  overflow: auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 140px);
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    width: 100%;
    justify-content: center;
}

.grid-element {
  color: #fff;
  overflow: hidden;
  height: 82px;
  background: white;
}

css css-grid

4 commentaires

appliquer justify-content: left; au lieu de justify-content: center; à la classe .grid

Mais je veux que les éléments de la grille s'alignent au centre lorsqu'il reste de l'espace.

pourquoi n'utilisez-vous pas la disposition de la grille bootstrap, c'est un meilleur et très facile de définir chaque élément de la grille, plus utilisé css, vous pouvez utiliser le col-sm-4 col-xs-12, etc.

Parce qu'il est moins flexible de modifier la quantité de colonnes en fonction de la largeur disponible.

3 Réponses :

-1
votes

Vous pouvez lui donner une classe, puis utiliser la marge pour l'aligner.

0 commentaires

0
votes

a ajouté justify-content: flex-start; à la classe .grid en espérant que cela vous aidera. merci

<div class="page">
  <p>Grid Header</p>
  <div class="grid">
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
  <div>
</div>

.page {
  min-width: 300px;
  background: lightgray;
  padding: 12px;
  resize: horizontal;
  overflow: auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 140px);
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    width: 100%;
    justify-content: flex-start;
}

.grid-element {
  color: #fff;
  overflow: hidden;
  height: 82px;
  background: white;
}

1 commentaires

Désolé, j'aurais dû préciser. Je veux que les éléments de la grille s'alignent au centre lorsqu'il y a plus d'espace.

2
votes

J'ajouterais simplement le titre en tant qu'élément à l'intérieur de la grille qui couvre toute la première ligne

<div class="page">
  <div class="grid">
    <p>Grid Header</p>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
  <div>
</div>

.page {
  min-width: 300px;
  background: lightgray;
  padding: 12px;
  resize: horizontal;
  overflow: auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 140px);
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    width: 100%;
    justify-content: center;
}

.grid-element {
  color: #fff;
  overflow: hidden;
  height: 82px;
  background: white;
}
.grid  p {
  grid-row:1;
  grid-column:1/-1;
}

0 commentaires