CODEWITHSUNDEEP
htmlcsscss-grid
qadenza
qadenza

Reputation: 9293

Centering a grid container

#panelb {
  background: lightblue;
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
}

.card {
  background: gold;
}

.imgcard {
  display: block;
  width: 100%;
  margin: 0 auto;
}
<div id='panelb'>
  <div class='card'>
    <img class='imgcard' src='imglink/01.jpg' alt='img'>
    <div class='linktitle'>TITLE</div>
  </div>

  <div class='card'>
    <img class='imgcard' src='imglink/02.jpg' alt='img'>
    <div class='linktitle'>TITLE</div>
  </div>

  ... and so on - about 50 cards
</div>

Everything works, except I want panelb always to be centered on page i.e. with dynamic width and equal left/right margins.

I cannot write display:inline-block; because it is already display:grid.

Also margin: 0 auto makes it width always 100% or another given width, regardless of number of cards in one row.

Any help?

Upvotes: 3

Views: 4758

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 370993

Make the parent of the grid container a flex container, with centering properties.

body {
  display: flex;
  justify-content: center;

}
#panelb {
  flex: 1; /* tells grid container to take full width of flex container */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 10px;
  background: lightblue;
}

.card {
  background: gold;
}

.imgcard {
  display: block;
  width: 100%;
  margin: 0 auto;
}
<div id='panelb'>

  <div class='card'>
    <img class='imgcard' src='imglink/01.jpg' alt='img'>
    <div class='linktitle'>TITLE</div>
  </div>

  <div class='card'>
    <img class='imgcard' src='imglink/02.jpg' alt='img'>
    <div class='linktitle'>TITLE</div>
  </div>

  <div class='card'>
    <img class='imgcard' src='imglink/02.jpg' alt='img'>
    <div class='linktitle'>TITLE</div>
  </div>

  <div class='card'>
    <img class='imgcard' src='imglink/02.jpg' alt='img'>
    <div class='linktitle'>TITLE</div>
  </div>

  <div class='card'>
    <img class='imgcard' src='imglink/02.jpg' alt='img'>
    <div class='linktitle'>TITLE</div>
  </div>

  <div class='card'>
    <img class='imgcard' src='imglink/02.jpg' alt='img'>
    <div class='linktitle'>TITLE</div>
  </div>

</div>

jsFiddle demo

Upvotes: 7

Related Questions