Elements within the CSS grid are misaligned

Question

Elements within the CSS grid are misaligned

After spending hours on it, aligning my grid elements vertically seems like a simple task that I just can't seem to crack. Check out the fiddle for a better idea of what I'm talking about. Any help with this issue would be greatly appreciated.

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/

css css-grid

Answer 1

Answer №1

After some thoughtful consideration and calculations, I managed to find a solution.

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

Check out the result here!

Answer 2

After some thoughtful consideration and calculations, I managed to find a solution.

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

Check out the result here!

Answer 3

Answer №2

While this question may be considered old, I faced a similar issue and wanted to share the solution that worked for me.

I came across a helpful comment that pointed me in the right direction.

The use of fr units for dividing space means only free space within the container is considered. Since the bottom section has 50px less free space than the top, alignment using fr units is not possible in this scenario.

To address the gap between columns, I found it more effective to approach the problem by having the layout span 2 columns out of a 3 column setup instead of focusing on occupying 2fr of a 3fr layout.

Thankfully, CSS grid allows us to specify the number of columns an element can span using grid-column: span 2;

By utilizing the provided HTML from the question, we can apply a span to 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;
}

Answer 4

While this question may be considered old, I faced a similar issue and wanted to share the solution that worked for me.

I came across a helpful comment that pointed me in the right direction.

The use of fr units for dividing space means only free space within the container is considered. Since the bottom section has 50px less free space than the top, alignment using fr units is not possible in this scenario.

To address the gap between columns, I found it more effective to approach the problem by having the layout span 2 columns out of a 3 column setup instead of focusing on occupying 2fr of a 3fr layout.

Thankfully, CSS grid allows us to specify the number of columns an element can span using grid-column: span 2;

By utilizing the provided HTML from the question, we can apply a span to 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;
}

Answer 5

Answer №3

If you want to achieve this with just one parent element, here is a possible solution:

.container {
  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';
}
.container > 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="container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="item4"></div>
  <div class="item5"></div>
</div>

Answer 6

If you want to achieve this with just one parent element, here is a possible solution:

.container {
  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';
}
.container > 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="container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="item4"></div>
  <div class="item5"></div>
</div>

Answer 7

Answer №4

An easy workaround would be to adjust the spacing between columns in the grid layout by using margins instead of the grid-column-gap property, especially if having extra space on the sides is not an issue:

Below is the HTML structure:

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

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

This is how the CSS styling looks like:

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

You can view the code example here: https://codepen.io/fillsanches/pen/oNEpKWN

Answer 8

An easy workaround would be to adjust the spacing between columns in the grid layout by using margins instead of the grid-column-gap property, especially if having extra space on the sides is not an issue:

Below is the HTML structure:

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

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

This is how the CSS styling looks like:

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

You can view the code example here: https://codepen.io/fillsanches/pen/oNEpKWN

Elements within the CSS grid are misaligned

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Once the image is loaded, cropped, and displayed on the canvas, what is the best way to implement image rotation functionality for the user before converting it to base64?

Customize the appearance of a <label> tag when it is inside an <input> tag that is marked as invalid

Using Bootstrap, creating a full-height body with multiple scrollable divs

Combining input elements and captchas in one line within Bootstrap

Deleting a division with the help of media queries

Expanding Tile Size in Grids Using CSS and JavaScript

Ways to enhance an image by zooming in when the user reaches a designated area on the webpage

Finding all instances of a specific class in Sublime Text 2

Adjust the vertical position of the image with HTML and CSS

Modifying the URL of an image based on screen size with the @media property

CSS horizontal scrolling for unaligned unordered lists

Content within the two inline divs is experiencing alignment problems?

Using Javascript or jQuery to Enhance the Appearance of Text on a Website

Alignment problem with email signatures on MAC devices

Alter the border hue of the checkbox and radio button

how can you make keyframe animation pause at the last stage?

Issue with flexbox max-width property not being applied when resizing the page width

Ways to prevent the :link style being applied to every link

Stop CSS tooltip from overflowing outside of the page or window

Ways to design a parent element based on the presence of a particular child element