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:
Please Login to comment...