Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads