Как с помощью CSS сделать div, занимающий две строки в сетке?

Опубликовано: 25 Февраля, 2022

Предположим, у нас есть 5 элементов в ряд и задача поместить в середину ряда более крупный элемент. Как с помощью CSS сделать DIV охватывающим 2 строки сетки.

Подход 1: сначала получите высоту внешнего DIV идентификатора ('external') . Мы знаем, что высота внешнего элемента теперь может быть достигнута с помощью CSS Flexbox с flex-direction: column и flex-wrap: 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>

Выход:

Подход 2:

Сделайте внешний DIV на уровне блока.
Создайте столбец сетки шириной 90 пикселей и сделайте это 5 раз.
Строки будут созданы автоматически.
Свойства нравятся. grip-gap - это сокращение от grid-row-gap и grid-column-gap .
Большой элемент будет занимать строки с 1 по 3.
Большой элемент будет занимать от 2 до 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>

Выход:

HTML CSS-Misc HTML-Misc CSS

Как с помощью CSS сделать div, занимающий две строки в сетке?

РЕКОМЕНДУЕМЫЕ СТАТЬИ