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

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> <div>1</div> <div>2</div> <div>3</div> <div>4</div>
</div>

1

4 Answers

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> <div>1</div> <div>2</div> <div>3</div> <div>4</div>
</div>

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.

1

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> <div>1</div> <div>2</div> <div>3</div> <div>4</div>
</div>

3

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> <div><span>1</span></div> <div><span>2</span></div><br> <div><span>3</span></div> <div><span>4</span></div>
</div>

3

You can try this: This is HTML:

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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy