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:
.container {
grid-column-gap: <
line-size
>;
grid-row-gap: <
line-size
>;
}
Example:
<!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:
An example of grid with 50px gap between rows and 50px gap between column.
Browser Compatibility:
- Support in Flex layout:
- Chrome: No
- Firefox: Yes (63.0)
- Edge: No
- Internet Explorer: No
- Opera: No
- Safari: N0
- Support in Grid layout:
- 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...