Creating a 3x3 grid with CSS grid is great, especially when you want to place items in specific columns within the grid

Question

Creating a 3x3 grid with CSS grid is great, especially when you want to place items in specific columns within the grid

I'm attempting to design a layout that has a unique structure:

https://i.sstatic.net/dCLoPm.png

The blue rectangles are represented by divs. It's like a 3x3 grid, but with spaces in the 3rd and 4th columns of the grid.

How can I incorporate these gaps using CSS grid to achieve this particular design? I've experimented with flexbox, but couldn't quite reach the desired outcome, so I'm hoping a grid layout will provide the solution.

Below is the code I have been working with:

.container{
  border: 1px solid;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    ". . ."
    ". . ."; 
}

.item{
  border: 1px solid lightgrey;
  padding: 10px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

html css css-grid

Answer 1

Answer №1

With CSS grid, you have the flexibility to specify where an element should start in terms of rows and columns, as well as how many columns/rows it should span.

In this code snippet, the 3rd and 4th children of the wrapper are assigned specific grid positions.

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

.item {
  border: 1px solid lightgrey;
  padding: 10px;
}

.item:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.item:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

It's worth noting that a non-zero grid-gap is included in this demo. The grid-area settings have been removed since they are unnecessary when using the method outlined above.

Answer 2

With CSS grid, you have the flexibility to specify where an element should start in terms of rows and columns, as well as how many columns/rows it should span.

In this code snippet, the 3rd and 4th children of the wrapper are assigned specific grid positions.

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

.item {
  border: 1px solid lightgrey;
  padding: 10px;
}

.item:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.item:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

It's worth noting that a non-zero grid-gap is included in this demo. The grid-area settings have been removed since they are unnecessary when using the method outlined above.

Answer 3

Answer №2

A condensed CSS grid solution with essential code snippets:

.container{
  border: 1px solid;
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-auto-rows: 1fr;
  grid-gap:5px;
}

.item{
  border: 1px solid lightgrey;
  padding: 10px;
}

.item:nth-child(3) {
  grid-column:2;
}
.item:nth-child(4) {
  grid-column:3;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Answer 4

A condensed CSS grid solution with essential code snippets:

.container{
  border: 1px solid;
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-auto-rows: 1fr;
  grid-gap:5px;
}

.item{
  border: 1px solid lightgrey;
  padding: 10px;
}

.item:nth-child(3) {
  grid-column:2;
}
.item:nth-child(4) {
  grid-column:3;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Answer 5

Answer №3

What are your thoughts on padding and margin usage in CSS?

.container {
  border: 1px solid #777;
  display: inline-grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 0 0; 
  grid-template-areas: 
    ". . ."
    ". . ."; 
}

.item {
  border: 1px solid lightgrey;
  padding: 2px 0;
  width: 55px !important;
  height: 50px !important;
  margin: 1px !important;
  background: #1657c9;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}
.item-text {
  position: relative;
  top: 38%;
  margin: 0;
  font-size: normal;
}
.item-3, .item-4 {
  position: relative;
  left: 100%;
}

<div class="container">
  <div class="item item-1"><span class="item-text">1</span></div>
  <div class="item item-2"><span class="item-text">2</span></div><br>
  <div class="item item-3"><span class="item-text">3</span></div>
  <div class="item item-4"><span class="item-text">4</span></div>
</div>

Answer 6

What are your thoughts on padding and margin usage in CSS?

.container {
  border: 1px solid #777;
  display: inline-grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 0 0; 
  grid-template-areas: 
    ". . ."
    ". . ."; 
}

.item {
  border: 1px solid lightgrey;
  padding: 2px 0;
  width: 55px !important;
  height: 50px !important;
  margin: 1px !important;
  background: #1657c9;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}
.item-text {
  position: relative;
  top: 38%;
  margin: 0;
  font-size: normal;
}
.item-3, .item-4 {
  position: relative;
  left: 100%;
}

<div class="container">
  <div class="item item-1"><span class="item-text">1</span></div>
  <div class="item item-2"><span class="item-text">2</span></div><br>
  <div class="item item-3"><span class="item-text">3</span></div>
  <div class="item item-4"><span class="item-text">4</span></div>
</div>

Answer 7

Answer №4

Give this a shot: Here's some HTML:

<section class="container">
<article class="box1"> </article>
<article class="box2"> </article>
<article class="box3"> </article>
<article class="box4"> </article>
</section>

along with some CSS

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

    .box1 {
      grid-area: 1 / 1 / 3 / 2;
      background: green;
      height: 100px;
      margin: 10px;
    }

    .box2 {
      grid-area: 1 / 2 / 2 / 4;
      background: green;
      height: 100px;
      margin: 10px;
    }

    .box3 {
      grid-area: 2 / 1 / 4 / 3;
      background: green;
      height: 100px;
      margin: 10px;
    }

    .box4 {
      grid-area: 3 / 3 / 4 / 5;
      background: green;
      height: 100px;
      margin: 10px;
    }

https://i.sstatic.net/tmLVI.png

Answer 8

Give this a shot: Here's some HTML:

<section class="container">
<article class="box1"> </article>
<article class="box2"> </article>
<article class="box3"> </article>
<article class="box4"> </article>
</section>

along with some CSS

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

    .box1 {
      grid-area: 1 / 1 / 3 / 2;
      background: green;
      height: 100px;
      margin: 10px;
    }

    .box2 {
      grid-area: 1 / 2 / 2 / 4;
      background: green;
      height: 100px;
      margin: 10px;
    }

    .box3 {
      grid-area: 2 / 1 / 4 / 3;
      background: green;
      height: 100px;
      margin: 10px;
    }

    .box4 {
      grid-area: 3 / 3 / 4 / 5;
      background: green;
      height: 100px;
      margin: 10px;
    }

https://i.sstatic.net/tmLVI.png

Creating a 3x3 grid with CSS grid is great, especially when you want to place items in specific columns within the grid

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using the ol tag in Google Chrome browser

TinyMCE: Tips for adding and highlighting text in your content!

Is it feasible to place an ordered list within a table row <tr>?

Use React to insert a leading zero next to a number in the input field if the number is greater than 10

Ensuring uniform height of columns in Bootstrap

Ways to dynamically incorporate media queries into an HTML element

Is receiving an error message about a "stray start tag footer" in your HTML validator?

Keeping the color of CSS buttons consistent can be achieved by setting specific

`To transfer the selected radio button value to a different form field using jquery, follow these steps.`

Looking to Move the Image Up?

When you hover over the Dropdown Menu, the Hoverable Dropdown Menu will automatically close

Show flexibility in the grandchildren of a row layout

How to efficiently pass multiple inputs from an HTML form to a controller in AngularJS using a single ng

Is it necessary for a click handler to be triggered when clicking on a scrollbar?

How can the refresh event be detected within an iframe by the parent document?

Is it possible to customize the placement of the login or register success message?

Switch the checkbox attribute for multiple items within a carousel using Angular 2/Typescript

Finding the nth-level children using JQuery

The "initialized" event in angular2-tree-component fires prior to the data being loaded

Ensure that the assistant stays beneath the cursor while moving it