Home > Back-end >  How to use CSS grid to create 3x3 grid but place items in specific grid columns
How to use CSS grid to create 3x3 grid but place items in specific grid columns

Time:10-31

I'm trying to create a layout that looks like this:

enter image description here

The blue blocks are divs. It's essentially a 3x3 grid but with gaps in the 3rd and 4th grid column.

How can I create a gap within CSS grid to achieve this layout? I've tried it with flexbox, but couldn't achieve the above, so hoping a grid layout is the answer.

Here's my code:

.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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

CSS grid allows you to choose which row and column an element will start in (and indeed, though not needed in your case, how many columns/rows it is to span).

This snippet gives the 3rd and 4th children of the wrapper 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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Note: just for a demo it has also introduced a non-zero grid-gap. The grid-area settings have been removed as not needed if the above method is followed.

CodePudding user response:

A simplified version of the CSS grid solution with only the necessary code:

.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>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

How about padding/margin?

.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>
<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

You can try this: This is HTML:

<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
</div>

and CSS

.parent {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;
    }

    .div1 {
      grid-area: 1 / 1 / 2 / 2;
      background: blue;
      height: 3rem;
      margin: 1rem;
    }

    .div2 {
      grid-area: 1 / 2 / 2 / 3;
      background: blue;
      height: 3rem;
      margin: 1rem;
    }

    .div3 {
      grid-area: 2 / 2 / 3 / 3;
      background: blue;
      height: 3rem;
      margin: 1rem;
    }

    .div4 {
      grid-area: 2 / 3 / 3 / 4;
      background: blue;
      height: 3rem;
      margin: 1rem;
    }

grid

  • Related