CSS grid elements not aligned properly

Question

seems like an easy task which Im trying to get done since hours. I cant get my grid elements vertical aligned properly. Please take a look at the fiddle to get the idea. Maybe someone could help me with this issue.

HTML

 <section class="top">
   <div></div>
   <div></div>
 </section>

 <section class="bottom">
   <div></div>
   <div></div>
   <div></div>
 </section>

CSS

 section {
   display: grid; 
   grid-template-rows:auto; 
   margin: 40px 0 0 0
 }

 section.top {
   grid-template-columns:2fr 1fr;
   grid-column-gap: 50px;
 }

 section.bottom {
   grid-template-columns:1fr 1fr 1fr;
   grid-column-gap: 50px;
 }

 section div {
   background:lightblue;
   height:400px
 }

https://jsfiddle.net/ecj1wrae/

Do you mean the bottom two items must align in a column with the top item? — Michael Benjamin
– Michael Benjamin, Commented May 9, 2018 at 21:53
But you're dividing space using fr units, which applies only free space in the container. And the bottom section has 50px less free space than the top. So they cannot be aligned in this manner. — Michael Benjamin
– Michael Benjamin, Commented May 9, 2018 at 22:09

hes · Accepted Answer · 2018-05-11 00:05:24Z

3

Well, with some thinking and calculation this one here does the trick

CSS

section.top {
  grid-template-columns:calc(66% + 2vw) 34%;
  grid-column-gap: 2vw;
}

section.bottom {
  grid-template-columns:33% 33% 34%;
  grid-column-gap: 2vw;
}

https://jsfiddle.net/ecj1wrae/3/

edited May 11, 2018 at 0:05

answered May 9, 2018 at 22:43

hes

1532 silver badges15 bronze badges

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

2 Comments

Michael Benjamin Over a year ago

Good idea. Except the second column in .top should be just 34% (no need for calc()). Two reasons: (1) there is no column gap dividing the 34% item in .bottom, and (2) by subtracting 2vw you're shortening the item on the top (see the right margin).

hes Over a year ago

Yeah. You´re right again. Thank you sir for your help and for commenting the other answers which did not really helped.

dbenmore · Accepted Answer · 2020-11-19 13:14:34Z

I know this is an old question... But I had a similar problem and I thought I'd share my solution for anyone else that needs some help.

This comment helped push me in the right direction

But you're dividing space using fr units, which applies only free space in the container. And the bottom section has 50px less free space than the top. So they cannot be aligned in this manner

As the layout needs to consider the gaps between the columns I found it better to frame the problem as it needs to take up 2 columns of a 3 column layout instead of thinking it needs to take up 2fr of a 3fr layout.

Helpfully grid allows us to specify how many columns an element can span grid-column: span 2;

Using the html in the question we can use a span on the first div in the top section:

section {
  display: grid; 
  margin: 40px 0 0 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column-gap: 50px;
}

section.top div:first-child {
   grid-column: span 2;
}

Reza Saadati · Accepted Answer · 2018-05-09 22:48:58Z

0

If you would like to do it with only 1 parent element, this may be a solution:

.wrapper {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-row-gap: 50px;
  grid-column-gap: 10px;
  grid-template-areas: 
    'item1 item1 item1 item1 item2'
    'item3 item3 item4 item4 item5';
}
.wrapper > div {
  background: red;
  height: 400px;
}

.item1 {
  grid-area: item1;
}
.item2 {
  grid-area: item2;
}
.item3 {
  grid-area: item3;
}
.item4 {
  grid-area: item4;
}
.item5 {
  grid-area: item5;
}

<div class="wrapper">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="item4"></div>
  <div class="item5"></div>
</div>

answered May 9, 2018 at 22:48

Reza Saadati

5,4644 gold badges33 silver badges69 bronze badges

1 Comment

Michael Benjamin Over a year ago

Says in the comments to the question that HTML structure is fixed.

Fellipe Sanches · Accepted Answer · 2022-05-28 03:10:13Z

0

A really simple solution is change the grid-column-gap by margin (if having space on the sides is not a problem):

HTML

<section class="top">
   <div></div>
   <div></div>
</section>

<section class="bottom">
   <div></div>
   <div></div>
   <div></div>
</section>

CSS

section {
   display: grid; 
   grid-template-rows:auto; 
   margin: 4px 0 0 0
 }

 section.top {
   grid-template-columns:2fr 1fr;
 }

 section.bottom {
   grid-template-columns:1fr 1fr 1fr;
 }

 section div { 
   background:lightblue;
   height:400px;
   margin: 5px;
 }

https://codepen.io/fillsanches/pen/oNEpKWN

edited May 28, 2022 at 3:10

answered May 28, 2022 at 3:04

Fellipe Sanches

8,3034 gold badges34 silver badges35 bronze badges

Collectives™ on Stack Overflow

CSS grid elements not aligned properly

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related