What is the method to achieve this layout shown in the image using CSS grid?

Question

What is the method to achieve this layout shown in the image using CSS grid?

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.grid-item {
  background: blue;
  height: 100px;
}

.grid-item .item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

<div class="grid-container">
  <div class="grid-item"> </div>

  <div class="grid-item item1"> </div>

  <div class="grid-item"> </div>
</div>

The current setup is not meeting my requirements View what I do not want

Desired outcome can be seen in the following image:

This is what I am aiming for

html css css-grid

Answer 1

Answer №1

When it comes to CSS Grid Layout, it really shines in its ability to divide a page into distinct regions and establish the relationship between parts of a control made from HTML primitives in terms of size, position, and layer.

If you set the height of a grid-item, it goes against the core purpose of using grid layouts, which is to allocate areas to grid children based on the layout defined by grid lines.

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  height:200px;
}

.grid-item {
  background: blue;
  
}
.item1 {
  grid-row: 1/3;
  grid-column: 2/3;
}

<div class="grid-container">
  <div class="grid-item"> </div>

  <div class="grid-item item1"> </div>

  <div class="grid-item"> </div>
</div>

Answer 2

When it comes to CSS Grid Layout, it really shines in its ability to divide a page into distinct regions and establish the relationship between parts of a control made from HTML primitives in terms of size, position, and layer.

If you set the height of a grid-item, it goes against the core purpose of using grid layouts, which is to allocate areas to grid children based on the layout defined by grid lines.

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  height:200px;
}

.grid-item {
  background: blue;
  
}
.item1 {
  grid-row: 1/3;
  grid-column: 2/3;
}

<div class="grid-container">
  <div class="grid-item"> </div>

  <div class="grid-item item1"> </div>

  <div class="grid-item"> </div>
</div>

Answer 3

Answer №2

Adjust the grid-items to remove their height and set the rows to a fixed height of 100px.

Next, designate the "tall" item to be located in column 2.

.grid-container {
  display: grid;
  gap: 10px;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: 100px;
}

.grid-item {
  background: blue;
}

.grid-item.item1 {
  grid-column:2;
  grid-row: 1 / span 2;
}

<div class="grid-container">
  <div class="grid-item"> </div>

  <div class="grid-item item1"> </div>

  <div class="grid-item"> </div>
</div>

Answer 4

Adjust the grid-items to remove their height and set the rows to a fixed height of 100px.

Next, designate the "tall" item to be located in column 2.

.grid-container {
  display: grid;
  gap: 10px;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: 100px;
}

.grid-item {
  background: blue;
}

.grid-item.item1 {
  grid-column:2;
  grid-row: 1 / span 2;
}

<div class="grid-container">
  <div class="grid-item"> </div>

  <div class="grid-item item1"> </div>

  <div class="grid-item"> </div>
</div>

Answer 5

Answer №3

Initially, there is a typo that needs to be corrected: the selector .grid-item .item1 implies that .item1 is a child of .grid-item, which is not the case. The space between classnames should be removed to become .grid-item.item1.

In addition, the height for .item1 must be reset so that it spans the entire rows it occupies and specify the columns it should be in to prevent it from appearing elsewhere.

To assist with debugging your CSS, assign different background-colors to your items to visualize their positioning accurately.

Possible CSS solution:

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.grid-item {
  background: blue;
  height: 100px;
}

.grid-item.item1 {
  grid-row-start:1;
  grid-row-end:3;
  grid-column:2;
  height:auto;
  background:red;
}

<div class="grid-container">
  <div class="grid-item"> </div>

  <div class="grid-item item1"> </div>

  <div class="grid-item"> </div>
</div>

Answer 6

Initially, there is a typo that needs to be corrected: the selector .grid-item .item1 implies that .item1 is a child of .grid-item, which is not the case. The space between classnames should be removed to become .grid-item.item1.

In addition, the height for .item1 must be reset so that it spans the entire rows it occupies and specify the columns it should be in to prevent it from appearing elsewhere.

To assist with debugging your CSS, assign different background-colors to your items to visualize their positioning accurately.

Possible CSS solution:

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.grid-item {
  background: blue;
  height: 100px;
}

.grid-item.item1 {
  grid-row-start:1;
  grid-row-end:3;
  grid-column:2;
  height:auto;
  background:red;
}

<div class="grid-container">
  <div class="grid-item"> </div>

  <div class="grid-item item1"> </div>

  <div class="grid-item"> </div>
</div>

What is the method to achieve this layout shown in the image using CSS grid?

Answer №1

Answer №2

Answer №3

Similar questions

The PHP Include function seems to be malfunctioning and unable to properly display

Creating an interactive timer that counts down in real-time using a combination of Django and JavaScript

Reducing the Distance Between Columns in Bootstrap 4

Determine the vertical dimension of a child division once it has been integrated into an HTML document

Tips for navigating a list of areas in JavaScript

Unable to delete borders within the container

swapping out an external CSS file in React for a new CSS file

Tips for customizing elements using Wordpress

CSS - Ensuring the second line of text in ul/ol li does not extend further left than the first line

Javascript use of overlaying dynamically generated Canvases

dropdown menu center

Trouble with .nextAll function not updating with dynamic content

Issue with changing image source on hover using JQuery not functioning as expected

Can the performance be affected by using multiple IFrames?

Adding Firebase Data to Vue Table

Retrieving text snippet from an HTML document using .NET

The CSS file seems to be ineffective when building Vue in production

I am currently working on developing an HTML and JavaScript audio player that can play audio at specific scheduled times

What are the steps to create a hovering dropdown menu that changes the background window to transparent when hovered over?

What is the best way to access the display property of a DOM element?