Несколько методов создания сетки 4×4 с помощью CSS: CSS Grid, Flexbox и Table

Чтобы создать сетку 4×4 с помощью CSS, вы можете использовать несколько методов. Вот некоторые из них:

Метод 1: CSS Grid
CSS Grid — это мощная система макетов, которая позволяет легко создавать сетки. Чтобы создать сетку 4×4 с помощью CSS Grid, вы можете определить элемент-контейнер и использовать свойства grid-template-columnsи grid-template-rows, чтобы указать количество столбцов и строк соответственно.

HTML:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <!-- Repeat the above four lines for a total of 16 grid items -->
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px; /* Optional: Add some gap between grid items */
}
.grid-item {
  /* Add styling for grid items as desired */
}

Метод 2: Flexbox
Flexbox — еще одна гибкая система макетов в CSS, которую можно использовать для создания структуры в виде сетки. Чтобы создать сетку 4×4 с помощью Flexbox, вы можете определить элемент-контейнер и использовать свойство flex-wrap, чтобы обернуть элементы в несколько строк, а затем настроить ширину элементов для создания желаемого результата. количество столбцов.

HTML:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <!-- Repeat the above four lines for a total of 16 grid items -->
</div>

CSS:

.grid-container {
  display: flex;
  flex-wrap: wrap;
}
.grid-item {
  flex-basis: 25%; /* Set the width to 25% for four columns */
  /* Add styling for grid items as desired */
}

Метод 3: Таблица
Вы также можете создать сетку с помощью HTML-элемента

. Хотя таблицы в основном используются для табличных данных, их также можно использовать для создания сеток.

HTML:

<table class="grid-container">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <!-- Repeat the above row three more times to create a total of four rows -->
</table>

CSS:

.grid-container {
  border-collapse: collapse; /* Optional: Remove space between table cells */
}
.grid-container td {
  width: 25%; /* Set the width to 25% for four columns */
  /* Add styling for grid items as desired */
}