How to Specify Divider gap in Square Grid using Bootstrap ?
The CSS grid-row-gap property is used to set the size of the gap between the grid row elements. Similarly, the CSS grid-column-gap property is used to set the size of the gap (gutter) between the column elements.
Syntax:
- CSS grid-column-gap property
grid-column-gap: none|length|percentage|initial|inherit;
- CSS grid-row-gap property
grid-row-gap: length|percentage|global-values;
Approach: It specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.
- Select the class that includes the grid layout.
- Specify the values for grid-gap property of that class.
- Example:
HTML
.container { grid-column-gap: <line-size>; grid-row-gap: <line-size>;} |
Example:
HTML
<!DOCTYPE html><html><head> <style> /* Use grid-row-gap and grid-column-gap to specify the gap between the square grids the gap between the row is specified 10px the gap between the row is specified 100px */ .grid-box { display: grid; grid-template-columns: auto auto auto auto; /* Specify the divider gap measurement in a grid */ grid-row-gap: 10px; grid-column-gap: 100px; background-color: yellow; padding: 5px; } .grid-box div { background-color: pink; text-align: center; padding: 15px 0; font-size: 25px; } </style></head><body> <h1> Demo to change the divider gap in Square grid picture </h1> <div class="grid-box"> <div class="item1">gfg</div> <div class="item2">gfg</div> <div class="item3">gfg</div> <div class="item4">gfg</div> <div class="item5">gfg</div> <div class="item6">gfg</div> <div class="item7">gfg</div> <div class="item8">gfg</div> <div class="item9">gfg</div> <div class="item10">gfg</div> <div class="item11">gfg</div> <div class="item12">gfg</div> <div class="item13">gfg</div> <div class="item14">gfg</div> <div class="item15">gfg</div> <div class="item16">gfg</div> <div class="item17">gfg</div> <div class="item18">gfg</div> <div class="item19">gfg</div> <div class="item20">gfg</div> <div class="item21">gfg</div> <div class="item22">gfg</div> <div class="item23">gfg</div> <div class="item24">gfg</div> </div></body></html> |
Output:
The grid has 10px gap between rows and 100px gap between columns.
An example of grid with 50px gap between rows and 50px gap between column.
The grid has 50px gap between rows and columns.
Browser Compatibility:
- Chrome: No
- Firefox: Yes (63.0)
- Edge: No
- Internet Explorer: No
- Opera: No
- Safari: No
- Chrome: Yes (66.0)
- Firefox: Yes (61.0)
- Edge: Yes (16.0)
- Internet Explorer: No
- Opera: Yes (53.0)
- Safari: Yes (10.1)
Please Login to comment...