I'm creating a layout using CSS Grids, and I want to have different space between each row.
I can create the layout fine by just using margin on each element, but this kind of obscures the simplicity of the code. Is there any grid tricks I can do achieve this, grid-row-gap
only seems to take one value, which it uses for all rows.
What I'm trying to achieve is a layout like this:
https://jsfiddle.net/8swzgk0b/1/
.grid { display: grid; grid-template-columns: auto 25% 25%; grid-template-rows: auto auto auto; width 100%; margin: 20px; grid-column-gap: 40px; /* grid-row-gap: 40px 60px; */ } div { background: #838383; height: 80px; } .wide { grid-column: 1 / span 3; margin-bottom: 5px; } .row-2 { background: green; margin-bottom: 10px; } .row-3 { background: blue; margin-bottom: 30px; } .row-4 { background: red; margin-bottom: 20px; }
<div class="grid"> <div class="wide"></div> <div class="row-2"></div> <div class="row-2"></div> <div class="row-2"></div> <div class="row-3"></div> <div class="row-3"></div> <div class="row-3"></div> <div class="row-4"></div> <div class="row-4"></div> <div class="row-4"></div> </div>
grid-gap is the idiomatic approach for spacing grid items, but it's not ideal since grid gaps are just that: empty space, not physical boxes. To that end, the only way to color these gaps is to apply a background color to the grid container.
grid-row-gap: It sets the size of the gap between the rows in a grid layout. Its default value is 0. grid-column-gap: It sets the size of the gap between the columns in a grid layout. Its default value is 0.
Is there any grid trick I can do to achieve this,
grid-row-gap
only seems to take one value, which it uses for all rows.
With the grid-row-gap
, grid-column-gap
and grid-gap
properties, you cannot apply different widths to different gaps. Like you noted, only one value can be used for each axis: One for row gaps and another for column gaps (spec).
You could use margins (or padding) to show extra space, but this doesn't actually change the width of the gap. It only expands the row.
In the example below (based on your code), grid-row-gap
is set to 20px. Grid items have the margin-bottom
variations you set. Notice how the grip-row-gap
size never changes. All changes occur inside the row.
.grid { display: grid; grid-template-columns: auto 25% 25%; grid-template-rows: auto auto auto; grid-column-gap: 40px; grid-row-gap: 20px; } div { background: #838383; height: 80px; } .wide { grid-column: 1 / span 3; margin-bottom: 5px; } .row-2 { background: green; margin-bottom: 10px; } .row-3 { background: blue; margin-bottom: 30px; } .row-4 { background: red; margin-bottom: 20px; }
<div class="grid"> <div class="wide"></div> <div class="row-2"></div> <div class="row-2"></div> <div class="row-2"></div> <div class="row-3"></div> <div class="row-3"></div> <div class="row-3"></div> <div class="row-4"></div> <div class="row-4"></div> <div class="row-4"></div> </div>
If you want to apply different size gaps between rows, then consider using actual rows for the job:
Now the gaps between rows have their own unique heights.
.grid { display: grid; grid-template-columns: auto 25% 25%; grid-template-rows: 80px 5px 80px 10px 80px 30px 80px 20px; /* adjusted */ grid-column-gap: 40px; } .wide { grid-column: 1 / span 3; background: #838383; } .row-2 { grid-row-start: 3; background: green; } .row-3 { grid-row-start: 5; background: blue; } .row-4 { grid-row-start: 7; background: red; }
<div class="grid"> <div class="wide"></div> <div class="row-2"></div> <div class="row-2"></div> <div class="row-2"></div> <div class="row-3"></div> <div class="row-3"></div> <div class="row-3"></div> <div class="row-4"></div> <div class="row-4"></div> <div class="row-4"></div> </div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With