how to center parent with display:grid

问题内容:

<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>

css

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

.card{
    background:gold;
}

.imgcard{
    display:block;
    width:100%;
    margin:0 auto;
}

Everything works, ecxept I want panelb allways to be centered on page i.e. with dymamic 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?

问题评论:

    
This is not possible when using grid-template-columns: repeat(auto-fit, 300px); as a width must be defined. Otherwise, if the grid container has a definite minimal size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.

答案:

答案1:

It’s a little unclear what you are after but it seems that you require an auto-width centered element with display:grid.

Instead, try display: inline-grid; and set the root to text-align:center.

body {
  text-align: center;
}

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

.card {
  background: gold;
}

.imgcard {
  display: block;
  width: 100%;
  margin: 0 auto;
}
<div id='panelb'>
  <div class='card'>
    <img class='imgcard' src='http://www.placebacon.net/400/300' alt='img'>
    <div class='linktitle'>TITLE</div>
  </div>

  <div class='card'>
    <img class='imgcard' src='http://www.placebacon.net/400/300' alt='img'>
    <div class='linktitle'>TITLE</div>
  </div>


</div>

答案评论:

    
display: inline-grid makes all cards stacked vertically !
– bonaca
8 mins ago
    
Yes it would, wrapping is automatic with any inline element. Your problem is that you need to set a width. Without a width, there is no wrapping or rather the element doesn’t know when to wrap.

答案2:

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

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

}
#panelb {
  flex: 1;
  background: lightblue;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 10px;
}

.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>

答案评论:

    
I cannot have body - display:flex because of other elements on page.
– bonaca
6 mins ago
    
It’s a concept based on the code in your question. In reality, you would make the parent of #panelb, whatever it may be, the flex container.

原文地址:

https://stackoverflow.com/questions/47756500/how-to-center-parent-with-displaygrid

Tags:

Add a Comment