Блог

Главная - Вопросы по программированию - CSS: Настройка гибкой сетки, которая принимает элементы 2 разных размеров

CSS: Настройка гибкой сетки, которая принимает элементы 2 разных размеров

#html #css

Вопрос:

У меня возникли проблемы с сеткой, которую я настраиваю. Я пытаюсь настроить сетку, которая занимает 2 коробки разного размера и может обернуть их соответствующим образом, но они не упаковываются должным образом. Я хочу, чтобы поля оставались прежними, но содержимое соответствовало их максимальной ширине.

 .container {
  background: red;
  height: 400px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}

.box1 {
   background: green;
   height: 20px;
   max-width 30px;
   flex: 1;
   margin: 3px;
}

.box2 {
   background: pink;
   height: 20px;
   max-width 50px;
   flex: 1;
   margin: 3px;
} 
 <div class="container">
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box1"></div>
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box2"></div>
   <div class="box2"></div>
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box1"></div>
   <div class="box1"></div>
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box1"></div>
   <div class="box1"></div>
   <div class="box1"></div>
</div> 
 <div class="container">
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box2"></div>
   <div class="box1"></div>
   <div class="box1"></div>
   <div class="box1"></div>
</div>

Пример желаемого внешнего вида:

      -------------------------------------
    |                                    |
    | [ BOX1 ] [ BOX1 ] [     BOX2    ]  |
    | [ BOX1 ] [     BOX2    ] [ BOX1 ]  |
    | [ BOX1 ] [ BOX1 ] [ BOX1 ] [ BOX1 ]|
    |                                    |
    _____________________________________

Ответ №1:

Выполнение этого с помощью flex box было бы головной болью, это гораздо проще сделать с помощью css-сетки, здесь:

 .container {
  background: red;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat( auto-fit, 25% );
  flex-wrap: wrap;
}

.box1 {
   background: green;
   height: 20px;
   width 25%;
   flex: 1;
   margin: 3px;
}

.box2 {
   background: pink;
   height: 20px;
   width 50%;
   flex: 1;
   grid-column: auto / span 2;
   margin: 3px;
} 
 <div class="container">
   <div class="box1"></div>
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box1"></div>
   <div class="box1"></div>
   <div class="box1"></div>
   <div class="box1"></div>
   <div class="box1"></div>
   </div>
Метки: ,