CODEWITHSUNDEEP
csshtmlgrid-layout
RomanOnARiver
RomanOnARiver

Reputation: 51

Center items in grid layout when not enough data to fill entire row

I'm using the new CSS grid layout, basically I'm displaying a series of images, which is fine with six columns, I've gotten that part down, but the content has a variable number, and often times there is not enough content to fill every column, so in the event that there's only say two items in the row, I'd like them to center in the middle two columns. This being a relatively new API though I haven't seen anything like this that I've managed to get working properly. Here is some sample CSS, please excuse my general ignorance if something looks horribly wrong.

#result-images{
display: grid;
grid-template-columns: 260px 260px 260px 260px 260px 260px;
grid-gap: 11px;
grid-column-gap:55px;
background-color: #959595;
border-style:solid;
border-width:3px;
border-color:#FFFFFF;

}

#result-images img{
width:100%;
height: 100%;
background-color: #363636;
display:block;
margin: 0 auto;
}

Upvotes: 5

Views: 4495

Answers (3)

Ronnie Smith
Ronnie Smith

Reputation: 18595

Flexbox is actually easier to use to achieve this output. Example below.

#result-images{
display:flex;
flex-flow: row wrap;
justify-content:center;
align-content:center;
align-items:center;
border: 2px solid black;
max-width:360px;
}

#result-images img{
min-width: 120px;
max-width: 120px;
min-height: 120px;
max-height: 120px;
flex: 0 1 auto
align-self:center;
}
<section id="result-images">

<img src="https://www.gstatic.com/webp/gallery/1.jpg">
<img src="https://www.gstatic.com/webp/gallery/2.jpg">
<img src="https://www.gstatic.com/webp/gallery/3.jpg">
<img src="https://www.gstatic.com/webp/gallery/4.jpg">
<img src="https://www.gstatic.com/webp/gallery/5.jpg">


</section>

  1. List item

Upvotes: 4

Kevin
Kevin

Reputation: 1

use auto-fit with repeat()

in your case grid-template-columns: repeat(auto-fit, 260px)

Upvotes: 0

Saw Zin Min Tun
Saw Zin Min Tun

Reputation: 642

Center an image in the area

#result-images {
    border: 2px solid #fffff;
    border-radius: 5px;
    background-color: #959595;
}

#result-images {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a a a ."
    ". a a a a .";
}
img {
  grid-area: a;
  align-self: center;
  justify-self: center;
  width: 100px;
  height: 100px;
}
<div id="result-images">
 <img src="https://c1.staticflickr.com/2/1018/805106121_ab84d1a216_b.jpg" />
</div>

Upvotes: 1

Related Questions