Css Grid: Center align different number of items in 2 rows

Question

I have to place 7 divs (images) in two rows, 3 in 1st row and 4 in 2nd row. Top 3 divs should be centered and bottom 4 can take all space.

Here is what I did:

.content {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr repeat(3, 170px) 1fr;
  grid-template-areas: ". item1 item2 item3 ."
                       "item4 item5 item6 item7";
  grid-template-rows: 1fr 1fr;
}

.content .box {
   width: 170px;
   height: 170px;
   border: solid 1px #000;
}

.content.box:nth-child(1) {
  grid-area: box1;
}

.content.box:nth-child(2) {
  grid-area: box2;
}

.content.box:nth-child(3) {
  grid-area: box3;
}

.content.box:nth-child(4) {
  grid-area: box4;
}

.content.box:nth-child(5) {
  grid-area: box5;
}

.content.box:nth-child(6) {
  grid-area: box6;
}

.content.box:nth-child(7) {
  grid-area: box7;
}

<div class="content">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>

remove space from your selector and use the name you defined in the areas — Temani Afif, Feb 17 '19 at 00:19
@TemaniAfif Is it something to do with solution or just styling the code? — Zohaib Ijaz, Feb 17 '19 at 00:22
it's to correct your code (somehow the solution) which is wrong. Space in selector have meaning, it's not only for styling the code (https://stackoverflow.com/q/1126338/8620333) — Temani Afif, Feb 17 '19 at 00:23

score 6 · Accepted Answer · answered Feb 17 '19 at 07:28

A grid, as its name implies, must be shaped as a grid. That menas that the number of columns must be the space for all the rows.

So, your style for areas is not being accepted by the browser, because it has 5 columns for the first row and 4 for the second row.

@kukkuz has already posted an answer correcting this issue. Here you have another possibility, in my vies more adjusted to your request.

Anyway, probably the best solution for this layout would be using flex (since the layout is not a real grid )

.content {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(8, 100px);
  grid-template-areas: "empt box1 box1 box2 box2 box3 box3 emp2"
                       "box4 box4 box5 box5 box6 box6 box7 box7";
  grid-template-rows: 1fr 1fr;
}

.content .box {
   width: 180px;
   height: 170px;
   border: solid 1px #000;
}

.content .box:nth-child(1) {
  grid-area: box1;
}

.content .box:nth-child(2) {
  grid-area: box2;
}

.content .box:nth-child(3) {
  grid-area: box3;
}

.content .box:nth-child(4) {
  grid-area: box4;
}

.content .box:nth-child(5) {
  grid-area: box5;
}

.content .box:nth-child(6) {
  grid-area: box6;
}

.content .box:nth-child(7) {
  grid-area: box7;
}

<div class="content">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>

Thanks a lot. That was simple math that I could not get. – Zohaib Ijaz Feb 17 '19 at 19:26 — Zohaib Ijaz, Feb 17 '19 at 19:26

score 3 · Answer 2 · answered Feb 17 '19 at 02:34

CSS Changes: Eliminate all of the CSS code (in your question) and replace it with this. Using grid-template-columns: 1fr repeat(3, 170px) 1fr; was messing things up because it wasn't representing both rows of boxes. Using grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); allows the browser/system to determine the actual placement for that specific row. And it lets each row do their own thing. Using place-items: end center; indicates that you want everything centered, but you want the system to start at the end and then center it. This prevents things from being stuck to the far left. Note: You do not need any other CSS for the effect you want. Just the .content and .box classes. Nothing else.

.content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    place-items: end center;
}

.box {
   width: 170px;
   height: 170px;
   border: solid 1px #000;
}

HTML Changes: Replace your html with (below). This will seperate the boxes into two rows. I wrapped each row with the .content so that they could contain a different number of boxes without an issue.

<div class="content">
  <div class="box">1</div>
   <div class="box">2</div>
  <div class="box">3</div>
</div>

<div class="content">
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>

I hope my explanation helps you better understand CSS Grid Layout. :)

Thanks @elbrant. I came up with similar solutions with two separate grids/row. — Zohaib Ijaz, Feb 17 '19 at 19:30

kukkuz · Answer 3 · 2019-02-17T06:01:10.660

You can create a 12 column grid using grid-template-columns: repeat(12, 1fr):

Adjust the column span to 4 for the first row and to 3 for the second row.
Use justify-items: center to align the containers to the center to get the center alignment.
Now you can adjust the spans or use justify-self for the required layout.

See a demo below:

.content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  justify-items: center;
}

.content .box {
  height: 170px;
  width: 170px;
  border: solid 1px #000;
}
.box:nth-child(1), .box:nth-child(2), .box:nth-child(3) { /* first three boxes */
  grid-column: span 4;
}
.box:nth-child(3) ~ .box { /* the last 4 boxes */
  grid-column: span 3;
}
/* alignment adjustment if needed */
.box:nth-child(1) {
  justify-self: flex-end;
}
/* alignment adjustment if needed */
.box:nth-child(3) {
  justify-self: flex-start;
}

<div class="content">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>

A demo with images in the boxes:

.content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  justify-items: center;
}

.content .box {
  border: solid 1px #000;
}

.box img {
  display: block;
  width: 100%;
}

.box:nth-child(1), .box:nth-child(2), .box:nth-child(3) { /* first three boxes */
  grid-column: span 4;
}
.box:nth-child(3) ~ .box { /* the last 4 boxes */
  grid-column: span 3;
}
/* alignment adjustment if needed */
.box:nth-child(1) {
  justify-self: flex-end;
}
/* alignment adjustment if needed */
.box:nth-child(3) {
  justify-self: flex-start;
}

<div class="content">
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
</div>

Css Grid: Center align different number of items in 2 rows

3 Answers3

Linked