Вопрос задан 10.06.2023 в 17:34. Предмет Другие предметы. Спрашивает Емельянова Анастасия.

Как сделать grid-сетку 4:3

Перейти к ответам

Отвечу на вопрос мгновенно! Нейросеть ChatGPT. Жми!

Ответы на вопрос

Внимание! Ответы на вопросы дают живые люди. Они могут содержать ошибочную информацию, заблуждения, а также ответы могут быть сгенерированы нейросетями. Будьте внимательны. Если вы уверены, что ответ неверный, нажмите кнопку "Пожаловаться" под ответом.

Отвечает Лавришин Олександр.

Ответ:

.wrapper {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-template-rows: repeat(3, 100px);

}

Скопировать в буфер обмена

<div class="box3">Three</div>

<div class="box7">Seven</div>

<div class="box8">Eight</div>

</div>

Отвечает нейросеть ChatGpt. Будьте внимательны, ответы нейросети могут содержать ошибочные или выдуманные данные.

Чтобы создать grid-сетку с соотношением сторон 4:3, вы можете использовать CSS Grid. Вот пример кода:

html
<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: 4fr 4fr 4fr;
      grid-template-rows: 3fr 3fr 3fr;
      grid-gap: 10px; /* Опционально: добавляет промежутки между ячейками */
      width: 100%; /* Ширина контейнера */
      height: 0; /* Высота контейнера. Высота будет рассчитана автоматически, исходя из соотношения сторон */
      padding-bottom: 75%; /* Значение 75% соответствует соотношению сторон 4:3 (3 / 4 * 100) */
    }

    .item {
      background-color: lightgray;
      border: 1px solid gray;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Ячейка 1</div>
    <div class="item">Ячейка 2</div>
    <div class="item">Ячейка 3</div>
    <div class="item">Ячейка 4</div>
    <div class="item">Ячейка 5</div>
    <div class="item">Ячейка 6</div>
    <div class="item">Ячейка 7</div>
    <div class="item">Ячейка 8</div>
    <div class="item">Ячейка 9</div>
  </div>
</body>
</html>

В этом примере создается контейнер с классом "container", который использует CSS Grid для размещения ячеек. С помощью свойств grid-template-columns и grid-template-rows задается разделение на колонки и строки. Значения 4fr и 3fr указывают, что каждая колонка должна занимать 1/3 доступной ширины, а каждая строка - 1/3 доступной высоты.

Дополнительно добавлено свойство grid-gap, которое определяет промежутки между ячейками. Значение 10px можно изменить на любое другое значение или удалить, если промежутки не требуются.

В этом примере ячейки имеют класс "item" и имеют стили для фона, границы и отступов, чтобы они были видны.

Обратите внимание, что в CSS задана высота контейнера в процентах с использованием padding-bottom. Значение 75% соответствует соотношению сторон 4:3 (3 / 4 * 100). Это позволяет контейнеру рассчитать высот

Спроси у Chat GPT бесплатно без регистрации!