Как разделить равные части сетки с помощью сетки(fr) только с помощью HTML и CSS

#css

Вопрос:

Друзья, я хочу разделить страницу на 5 равных частей, используя свойство CSS grid, и это работает лучше, но все равно я не могу понять логику, стоящую за этим. В системе сетки CSS экран содержит 12 единиц fr, а здесь я использовал только 10 единиц fr, так что это произойдет, если я оставлю 2 единицы fr или есть какой-либо другой способ использовать все 12 единиц.

     <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .grid {
        display: grid;
        grid-template-columns: repeat(5, 2fr);
      }
    </style>
  </head>
  <body>
    <footer class="grid">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
    </footer>
  </body>
</html>

Ответ №1:

«В системе сетки CSS экран имеет 12 единиц измерения fr»

Нет, это не так. В нем столько, сколько вы ему скажете. В вашем случае вы сказали, что он должен быть шириной 10 футов с grid-template-columns: repeat(5, 2fr)

Как правило, нет необходимости использовать несколько значений fr , так grid-template-columns: repeat(5, 1fr); как это будет делать одно и то же.

 .grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.grid div {
  text-align: center;
  border: 1px solid green;
}

 <footer class="grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</footer>

Если вам нужна сетка столбцов 6/12, просто отрегулируйте ее так, чтобы grid-template-columns: repeat(6, 1fr);

 .grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.grid div {
  text-align: center;
  border: 1px solid green;
}

 <footer class="grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</footer>

Как вы видите, поскольку у вас есть только 5 элементов, они занимают первые 5 столбцов.