How to make a div span two rows in a grid using CSS ?
Suppose we have 5 elements in a row and the task to put a bigger element in the middle of a row. How to make a DIV span the 2 rows of the grid with the help of CSS.
Approach 1: First get the height of the outer DIV of ID(‘outer’). We know the height of the outer element now design can be achieved using CSS Flexbox with flex-direction: column and flex-wrap: wrap. fixed height on the container tells the flex items where to wrap.
Example:
<!DOCTYPE HTML>
< html >
< head >
< style >
#outer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 120px;
width: 516px;
}
.div {
width: 90px;
flex: 0 0 50px;
margin: 5px;
background-color: green;
}
.big {
flex-basis: 110px;
}
</ style >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< p id = "GFG_UP" >
How to make a div span two
rows in a grid using CSS
</ p >
< div id = "outer" >
< div class = "div" ></ div >
< div class = "div" ></ div >
< div class = "div big" ></ div >
< div class = "div" ></ div >
< div class = "div" ></ div >
< div class = "div" ></ div >
< div class = "div" ></ div >
< div class = "div" ></ div >
< div class = "div" ></ div >
</ div >
</ body >
</ html >
|
Output:
Approach 2:
- Make a block-level outer DIV.
- Create a 90px width column of grid and do it 5 times.
- Rows will be created automatically.
- The properties like. grip-gap is shorthand for grid-row-gap and grid-column-gap are used.
- The large item will be span from row lines 1 to 3
- The large item will be span from grid column lines 2 to 3.
Example:
<!DOCTYPE HTML>
< html >
< head >
< style >
#outer {
display: grid;
grid-template-columns: repeat(5, 90px);
grid-auto-rows: 50px;
grid-gap: 10px;
width: 516px;
}
.big {
grid-row: 1 / 3;
grid-column: 2 / 3;
}
.div {
background-color: green;
}
</ style >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< p id = "GFG_UP" >
How to make a div span two rows
in a grid using CSS
</ p >
< div id = "outer" >
< div class = "div" ></ div >
< div class = "div" ></ div >
< div class = "div big" ></ div >
< div class = "div" ></ div >
< div class = "div" ></ div >
< div class = "div" ></ div >
< div class = "div" ></ div >
< div class = "div" ></ div >
< div class = "div" ></ div >
</ div >
</ body >
</ html >
|
Output:
Last Updated :
15 Oct, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...