Align CSS grid elements

Question

I start learning working with the CSS grid. I am making a grid there is looking like this. I need the item 3 and 4 to align with item 1 horizontally.

The height on all items should give 700px, so that part should fit. I am thinking if I am doing something wrong in the code regarding the rows and columns?

.wrapper {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-gap: 1em;
}

.wrapper>div {
  background-color: #eee;
  padding: 1em;
}

.wrapper>div:nth-child(odd) {
  background-color: #ddd;
}

.item1 {
  grid-row: 1 / 3;
  grid-column: 1/6;
  height: 700px;
}

.item2 {
  grid-row: 1 / 1;
  grid-column: 6/12;
  height: 340px;
}

.item3 {
  grid-row: 2 / 3;
  grid-column: 6/9;
  height: 350px;
}

.item4 {
  grid-row: 2/3;
  grid-column: 9/12;
  height: 350px;
}

<div class="wrapper">
  <div class="item1">
    This is item 1
  </div>
  <div class="item2">
    This is item 2
  </div>
  <div class="item3">
    This is item 3
  </div>
  <div class="item4">
    This is item 4
  </div>
</div>

user9019817 · Accepted Answer · 2019-02-27 08:51:53Z

4

A couple of changes should help. Firstly, change the grid-gap on the wrapper from 1em to 10px. This helps with the gap issue with 1em usually being 16px by default. Then just add box-sizing: border-box; to the .wrapper > div.

Here's a working example:

.wrapper {
  display:grid;
  grid-template-columns:repeat(11,1fr);
  grid-gap: 10px;
}	

.wrapper > div {
  background-color: #eee;
  padding: 1em;
  box-sizing: border-box;
}

.wrapper > div:nth-child(odd) {
  background-color: #ddd;
}

.item1 {
  grid-row: 1 / 3;
  grid-column: 1/6;
  height: 700px;
}
.item2 {
  grid-row: 1 / 1;
  grid-column: 6/12;
  height: 340px;
}
.item3 {
  grid-row: 2 / 3;
  grid-column: 6/9;
  height: 350px;
} 
.item4 {
  grid-row:2/3;
  grid-column: 9/12;
  height: 350px;
}

<div class="wrapper">
  	<div class="item1">
      This is item 1
    </div>
    <div class="item2">
      This is item 2
    </div>
    <div class="item3">
      This is item 3
    </div>
    <div class="item4">
      This is item 4
    </div>
</div>

answered Feb 27, 2019 at 8:51

user9019817

Sign up to request clarification or add additional context in comments.

1 Comment

McDuck4 Over a year ago

Thank you for the answer. I can see that is working. But I think I am getting problems if I want to build more grids. Fx if I want a new row with 2 columns. The height of the item is gonna be 400px. Isnt that gonna be problematic when I set the height on the wrapper? photobox.co.uk/my/photo/full?photo_id=501690173342

Dharmesh Vekariya · Accepted Answer · 2019-02-27 12:14:26Z

1

Your problem was the padding:1em on each of the grid elements. This makes them bigger than you expect.

I've amended your example below. I hope this helps :-)

.wrapper {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-gap: 1em;
}

.wrapper > div {
  background-color: #eee;
  padding: 1em;
}
.wrapper > div:nth-child(odd) {
  background-color: #ddd;
}
.item1 {
  grid-row: 1 / 3;
  grid-column: 1/6;
  height: 700px;
}
.item2 {
  grid-row: 1 / 1;
  grid-column: 6/12;
}
.item3 {
  grid-row: 2 / 3;
  grid-column: 6/9;
}
.item4 {
  grid-row: 2/3;
  grid-column: 9/12;
}

<div class="wrapper">
  <div class="item1">This is item 1</div>
  <div class="item2">This is item 2</div>
  <div class="item3">This is item 3</div>
  <div class="item4">This is item 4</div>
</div>

edited Feb 27, 2019 at 12:14

Dharmesh Vekariya

1,1563 gold badges14 silver badges32 bronze badges

answered Feb 27, 2019 at 8:49

coops

1,7121 gold badge17 silver badges27 bronze badges

4 Comments

McDuck4 Over a year ago

Thank you for the answer. I can see that is working. But I think I am getting problems if I want to build more grids. Fx if I want a new row with 2 columns. The height of the item is gonna be 400px. Isnt that gonna be problematic when I set the height on the wrapper? photobox.co.uk/my/photo/full?photo_id=501690173342

coops Over a year ago

@McDuck4 I see what you mean :-) I've amended my answer with the new information. If you remove the heights for all elements except the .item1. Then you'll be able to add more underneath without limiting the wrapper.

McDuck4 Over a year ago

Thank you a lot for the answer. So the first column will control the height? So I can also use this for other grid elements?

coops Over a year ago

It's just the largest element on that row, so the elements on the other side will grow to whatever that size is. If you add more rows underneath, then just add a height for that item too. You could also use grid-template-rows to help you make each row a different size.

Collectives™ on Stack Overflow

Align CSS grid elements

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related