How to make a div span two rows in a grid using CSS ? Last Updated : 26 Sep, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The main goal is to arrange five elements in a row where one larger element is positioned in the middle and spans across multiple rows. We can achieve this using two approaches: CSS Flexbox and CSS Grid.Approach 1: Using CSS FlexboxThe first approach uses CSS Flexbox, where the flex-direction: column and flex-wrap: wrap properties are applied to the container to arrange elements in a column and allow them to wrap into new rows. By setting a fixed height on the container, we can guide the flex items on where to wrap, ensuring that the larger element occupies the middle position.Steps:Create an outer div with a fixed height.Use flexbox with flex-direction: column and flex-wrap: wrap.The flex container's height will force items to wrap into two rows, and the larger item can be placed in the middle.Example: HTML <!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: Using CSS GridThe second approach leverages CSS Grid, which offers more precise control over the layout. Here, the larger element spans across multiple rows and columns within the grid.Steps:Define a grid layout with five columns.Use the grid-gap or grid-column-gap/grid-row-gap properties to control spacing.Use the grid-column and grid-row properties to span the larger element across the required rows and columns.Example: HTML <!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: Comment More infoAdvertise with us Next Article How To Center a Div Using CSS Grid? P PranchalKatiyar Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Create a Responsive Image Grid using CSS? A responsive image grid is a layout technique used to display images in a grid-like structure that adjusts dynamically based on the screen size to ensure that the grid looks good and functions well across various devices and screen resolutions. Below are the approaches to creat a responsive image gr 3 min read How To Center a Div Using CSS Grid? To center a <div> using CSS Grid, you can use a combination of grid container properties to place the <div> at the center of its parent container. The easiest way to achieve this is by setting the parent element to use display: grid and then using properties like place-items or a combina 3 min read How to make a grid without calling CSS Grid property ? In this article, we will see how to make a grid without calling CSS Grid property, along with understanding its implementation through the examples. It is essential to understand how CSS grid property works but what if we do not use the CSS grid property to make a grid. This is the generic question 4 min read How to Create Dynamic Grid Layout using CSS? A dynamic grid layout using CSS can help us to build responsive and flexible web designs. In this article, we are going to learn about different approaches to achieving dynamic grid layouts, with their syntax, and example code for each method. A dynamic grid layout adjusts based on the content and s 3 min read How to make grid items auto height using tailwind CSS ? You can easily make CSS grid items to auto height using grid-template-columns property in Tailwind CSS. Tailwind uses grid-col and grid-row property which is an alternative to the grid-template-columns property in CSS. The grid-template-columns property in CSS is used to set the number of columns an 2 min read How to Create a Masonry grid with flexbox in CSS? Masonry Grid in CSS is a layout technique that arranges items in a way that resembles a masonry wall, where items of varying heights are placed in columns, filling in gaps and creating a staggered appearance. This can be done using Flexbox by allowing items to wrap and adjusting their heights to cre 3 min read Like