Tips for aligning elements of varying sizes seamlessly with CSS grid?

Question

Tips for aligning elements of varying sizes seamlessly with CSS grid?

I am currently working on creating a CSS grid layout. The issue I'm facing is that the first element has a fixed height, causing the entire first row to have the same height. I want the elements in the second row to move up and fill the empty space in the first row. Is there a way to achieve this using CSS grid?https://i.sstatic.net/GRuv9.png

The webpage where I plan to implement this grid will have elements that vary in size based on user input.

I've experimented with grid-auto-columns, grid-auto-rows, and grid-auto-flow: dense; but so far, I haven't been able to achieve the desired outcome. Any suggestions would be greatly appreciated.

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1rem;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  height: 100px;
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
  border-radius: 4px;
  border: 6px solid #171717;
}

.item1 {
  height: 250px;
}

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

Check out my practice on Codepen: Codepen Link Here

html css

Answer 1

Answer №1

To keep things simple, just include the following code:

.primary {
  grid-row: span 2;
}

However, I opted to assign a CSS class to the specific element you want to emphasize. To achieve this:

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1rem;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  height: 100px;
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
  border-radius: 4px;
  border: 6px solid #171717;
}

.item1 {
  height: 250px;
}

.primary {
  /* This expands the .primary element(s) over
     two of the grid-row tracks: */
  grid-row: span 2;
}

<div class="container">
  <div class="item item1 primary"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
</div>

Check out this JS Fiddle demo.

You can also achieve the same result without adding a class name by specifying an :nth-child() element:

/* or .container > div:first-child: */
.container > div:nth-child(1) {
  grid-row: span 2;
}

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1rem;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  height: 100px;
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
  border-radius: 4px;
  border: 6px solid #171717;
}

.item1 {
  height: 250px;
}

/* or .container > div:first-child: */
.container > div:nth-child(1) {
  grid-row: span 2;
}

<div class="container">
  <div class="item item1 primary"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
</div>

Another JS Fiddle demonstration.

For more information, refer to:

grid-row on MDN Web Docs.

Answer 2

To keep things simple, just include the following code:

.primary {
  grid-row: span 2;
}

However, I opted to assign a CSS class to the specific element you want to emphasize. To achieve this:

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1rem;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  height: 100px;
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
  border-radius: 4px;
  border: 6px solid #171717;
}

.item1 {
  height: 250px;
}

.primary {
  /* This expands the .primary element(s) over
     two of the grid-row tracks: */
  grid-row: span 2;
}

<div class="container">
  <div class="item item1 primary"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
</div>

Check out this JS Fiddle demo.

You can also achieve the same result without adding a class name by specifying an :nth-child() element:

/* or .container > div:first-child: */
.container > div:nth-child(1) {
  grid-row: span 2;
}

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1rem;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  height: 100px;
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
  border-radius: 4px;
  border: 6px solid #171717;
}

.item1 {
  height: 250px;
}

/* or .container > div:first-child: */
.container > div:nth-child(1) {
  grid-row: span 2;
}

<div class="container">
  <div class="item item1 primary"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
</div>

Another JS Fiddle demonstration.

For more information, refer to:

grid-row on MDN Web Docs.

Answer 3

Answer №2

One limitation is trying to achieve the layout with only 2 rows, but using Grid provides a structured solution.

With 3 rows, it becomes achievable.

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 1rem;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  height: 100px;
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
  border-radius: 4px;
  border: 6px solid #171717;
}

.item1 {
  height: 250px;
  grid-area: 1 / 1 / 3 / 2;
}

.item2 {
  grid-area: 3 / 1 / 4 / 2;
}

.item3 {
  grid-area: 1 / 2 / 2 / 3;
}

.item4 {
  grid-area: 1 / 3 / 2 / 4;
}

.item5 {
  height: 250px;
  grid-area: 2 / 2 / 4 / 3;
}

.item6 {
  height: 250px;
  grid-area: 2 / 3 / 4 / 4;
}

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
</div>

Utilizing grid-area position for each item is one approach to achieving this layout.

Alternatively, achieving the same layout can also be done using span.

Answer 4

One limitation is trying to achieve the layout with only 2 rows, but using Grid provides a structured solution.

With 3 rows, it becomes achievable.

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 1rem;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  height: 100px;
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
  border-radius: 4px;
  border: 6px solid #171717;
}

.item1 {
  height: 250px;
  grid-area: 1 / 1 / 3 / 2;
}

.item2 {
  grid-area: 3 / 1 / 4 / 2;
}

.item3 {
  grid-area: 1 / 2 / 2 / 3;
}

.item4 {
  grid-area: 1 / 3 / 2 / 4;
}

.item5 {
  height: 250px;
  grid-area: 2 / 2 / 4 / 3;
}

.item6 {
  height: 250px;
  grid-area: 2 / 3 / 4 / 4;
}

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
</div>

Utilizing grid-area position for each item is one approach to achieving this layout.

Alternatively, achieving the same layout can also be done using span.

Answer 5

Answer №3

One possible solution to tackle this problem...

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1rem;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
    box-sizing:border-box;
}

.item {
  height: 100px;
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
  border-radius: 4px;
  border: 6px solid #171717;
}

.item1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    height: 250px;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
        
}
.item5 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

  <div class="container">
  <div class="item item1">item 1</div>
  <div class="item item2">item 2</div>
  <div class="item item3">item 3</div>
  <div class="item item4">item 4</div>
  <div class="item item5">item 5</div>
  </div>

Answer 6

One possible solution to tackle this problem...

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1rem;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
    box-sizing:border-box;
}

.item {
  height: 100px;
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
  border-radius: 4px;
  border: 6px solid #171717;
}

.item1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    height: 250px;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
        
}
.item5 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

  <div class="container">
  <div class="item item1">item 1</div>
  <div class="item item2">item 2</div>
  <div class="item item3">item 3</div>
  <div class="item item4">item 4</div>
  <div class="item item5">item 5</div>
  </div>

Tips for aligning elements of varying sizes seamlessly with CSS grid?

Answer №1

Answer №2

Answer №3

Similar questions

Guide on creating a toggle effect for a div with querySelector and addEventListener

Here is a helpful guide on updating dropdown values in real time by retrieving data from an SQL database

Some elements in the DOM appear to not be rendering even though they are present in the HTML source code

What is the best way to unselect the "all" selector if one of the inputs is no longer selected?

The footer element is missing from the body section of the HTML code, causing the box shadow to not encompass the footer as intended

CSS files imported from the node modules are mysteriously disappearing

JavaScript: displaying the value of a checked checkbox

What is the best way to showcase the following values using Vue.js?

How to manage the three states (InProgress, Success, Error) of a dropdown dynamically in AngularJS with ng-show/hide?

Toggle between bold and original font styles with Javascript buttons

Guide to smoothly scroll to the top of an element containing collapsible panels using Jquery

JavaScript: When setting focus on a DOM element, the document.activeElement is not automatically updated

In search of a render function that can effectively apply styles to HTML strings using React JS

What is the best way to include an ellipsis after a couple of lines of

Trouble with retrieving data from localStorage

Navigate to the end of a container

Using ASP.NET Server Controls to Toggle Textbox Visibility Based on Dropdown Selection

The Chakra Card component is being displayed in a vertical layout instead of the usual horizontal

Tips on how to maintain the underline when text is split into two sections

Processing file to retrieve information (JavaScript)