How to make a div span two rows in a grid using CSS ? - GeeksforGeeks

15 Oct, 2020
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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
How to set div width to fit content using CSS ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)