CSS Сетка автоматически охватывает оставшиеся пустые столбцы

ProgramBox

CSS Сетка автоматически охватывает оставшиеся пустые столбцы

Post author:admin
Запись опубликована:3 января, 2022
Post category:Вопросы по программированию

#html #css

#HTML #CSS

Вопрос:

Я ищу решение своей проблемы с CSS-сеткой. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что у меня есть сетка с 4 столбцами и 10 полями, которая заполняет ячейку строки столбца примерно так: Однако я хотел бы, чтобы оставшиеся два поля автоматически охватывали всю ширину, как это: (вставка 9 и вставка 10). Хотя я достиг этого здесь, я не хочу, чтобы мне приходилось делать это вручную. Я бы хотел, чтобы сетка автоматически могла это сделать. Достижимо ли это?

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;titlegt;lt;/titlegt; lt;/headgt; lt;stylegt;   lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;titlegt;lt;/titlegt; lt;/headgt; lt;stylegt;  html {   } .grid {  width:100%;  height:200px;  display:grid;  grid-template-columns: 1fr 1fr 1fr 1fr;  gap:10px;   } .grid .box {    width:100%;  height:100%;  text-align: center;    background-color: red;   }  /* .grid .box:nth-child(9) {  grid-column: span 2; } .grid .box:nth-child(10) {  grid-column: span 2; } */ @media (max-width:768px){  .grid {  grid-template-columns: 1fr 1fr 1fr 1fr;  } } lt;/stylegt; lt;bodygt;    lt;div class="grid"gt;   lt;div class="box"gt;Box 1lt;/divgt;  lt;div class="box"gt;Box 2lt;/divgt;  lt;div class="box"gt;Box 3lt;/divgt;  lt;div class="box"gt;Box 4lt;/divgt;  lt;div class="box"gt;Box 5lt;/divgt;  lt;div class="box"gt;Box 6lt;/divgt;  lt;div class="box"gt;Box 7lt;/divgt;  lt;div class="box"gt;Box 8lt;/divgt;  lt;div class="box"gt;Box 9lt;/divgt;  lt;div class="box"gt;Box 10lt;/divgt;    lt;/divgt;   lt;/bodygt; lt;/htmlgt;

1. Невозможно с CSS-сеткой, вам нужен flexbox.

2. Ах. Большое спасибо.

3. Что вы имеете в виду под to auto span этим ? Ваша фотография возможна с grid помощью , просто неясно, что такое «для автоматического охвата».

4. Для полей 9 и 10 на первом изображении я бы хотел, чтобы они равномерно занимали третий ряд, как на последнем изображении.

Ответ №1:

Вы можете сделать это с помощью flex-box, используя flex-grow и вычисление ширины. Для дочерних элементов, кратных 4, ширина calc будет динамически заполнять их, используя вычисленную ширину width: calc(25% - 1em) . Для оставшихся элементов, не делящихся на четыре, flex-grow: 1 убедитесь, что они заполнят оставшееся пространство.

 .parent {  display: flex;  flex-wrap: wrap;  gap: 1em; }  .child {  display: flex;  justify-content: center;  flex-grow: 1;  width: calc(25% - 1em);  background-color: red;  height: 2em; }

 lt;div class="parent"gt;  lt;div class="child"gt;Box 1lt;/divgt;  lt;div class="child"gt;Box 2lt;/divgt;  lt;div class="child"gt;Box 3lt;/divgt;  lt;div class="child"gt;Box 4lt;/divgt;  lt;div class="child"gt;Box 5lt;/divgt;  lt;div class="child"gt;Box 6lt;/divgt;  lt;div class="child"gt;Box 7lt;/divgt;  lt;div class="child"gt;Box 8lt;/divgt;  lt;div class="child"gt;Box 9lt;/divgt; lt;/divgt; lt;brgt;lt;brgt; lt;div class="parent"gt;  lt;div class="child"gt;Box 1lt;/divgt;  lt;div class="child"gt;Box 2lt;/divgt;  lt;div class="child"gt;Box 3lt;/divgt;  lt;div class="child"gt;Box 4lt;/divgt;  lt;div class="child"gt;Box 5lt;/divgt;  lt;div class="child"gt;Box 6lt;/divgt;  lt;div class="child"gt;Box 7lt;/divgt;  lt;div class="child"gt;Box 8lt;/divgt;  lt;div class="child"gt;Box 9lt;/divgt;  lt;div class="child"gt;Box 10lt;/divgt; lt;/divgt; lt;brgt;lt;brgt; lt;div class="parent"gt;  lt;div class="child"gt;Box 1lt;/divgt;  lt;div class="child"gt;Box 2lt;/divgt;  lt;div class="child"gt;Box 3lt;/divgt;  lt;div class="child"gt;Box 4lt;/divgt;  lt;div class="child"gt;Box 5lt;/divgt;  lt;div class="child"gt;Box 6lt;/divgt;  lt;div class="child"gt;Box 7lt;/divgt;  lt;div class="child"gt;Box 8lt;/divgt;  lt;div class="child"gt;Box 9lt;/divgt;  lt;div class="child"gt;Box 10lt;/divgt;  lt;div class="child"gt;Box 11lt;/divgt; lt;/divgt;

Ответ №2:

На самом деле вы были очень близки:)

 .grid {  width:100%;  height:200px;  display:grid;  grid-template-columns: 1fr 1fr 1fr 1fr;  gap:10px;   } .grid .box {    width:100%;  height:100%;  text-align: center;    background-color: red;   }  .grid .box:nth-child(9) {  grid-column: 1/span 2; } .grid .box:nth-child(10) {  grid-column: 3/span 2; }  @media screen (max-width:768px){  .grid {  grid-template-columns: 1fr 1fr 1fr 1fr;  } }

 lt;div class="grid"gt;   lt;div class="box"gt;Box 1lt;/divgt;  lt;div class="box"gt;Box 2lt;/divgt;  lt;div class="box"gt;Box 3lt;/divgt;  lt;div class="box"gt;Box 4lt;/divgt;  lt;div class="box"gt;Box 5lt;/divgt;  lt;div class="box"gt;Box 6lt;/divgt;  lt;div class="box"gt;Box 7lt;/divgt;  lt;div class="box"gt;Box 8lt;/divgt;  lt;div class="box"gt;Box 9lt;/divgt;  lt;div class="box"gt;Box 10lt;/divgt;    lt;/divgt;