Блог

Главная - Вопросы по программированию - CSS, сетка 3×2, как я могу отделить последний столбец от первых 2, но чтобы все ячейки были одинаковыми соотношениями?

CSS, сетка 3×2, как я могу отделить последний столбец от первых 2, но чтобы все ячейки были одинаковыми соотношениями?

#html #css

Вопрос:

У меня есть 6 ячеек в сетке 3×2.

У меня есть следующий html

 .wrapper {
  margin: 2px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  border:1px solid #000;/* only for showing here */
  min-height:20px;/* only for showing here */
} 
 <div class='wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='1'>
      </div>
    </div>
    <div class='column'>
      <div class='2'>
      </div>
    </div>
    <div class='column'>
      <div class='3'>
      </div>
    </div>
  </div>
  <div class='row'>
    <div class='column'>
      <div class='4'>
      </div>
    </div>
    <div class='column'>
      <div class='5'>
      </div>
    </div>
    <div class='column'>
      <div class='6'>
      </div>
    </div>
  </div>
</div>

Это создает сетку 3х2.

Однако я хочу, чтобы на экранах меньшего размера конечный столбец находился под первыми 2 столбцами. Затем я создал 1 столбец шириной 66,6% и еще один столбец шириной 33,3%. В первом столбце созданы 2 строки с другими столбцами в каждой строке. А во втором столбце созданы 2 строки по 1 столбцу в каждой строке.

Теперь у меня есть сетка 3×2, которая на мобильном телефоне помещает конечный столбец после первых 2 столбцов. Однако столбцы в первых 2 столбцах (66,6%) равны, но 3-й (33,3%) отличается по высоте от первого, поскольку теперь они являются отдельными столбцами.

Как я могу сделать так, чтобы дивы в конце были одинаковой высоты с дивами в первом? Спасибо

Правка Добавила изображение в качестве примера

Пример

Комментарии:

1. Не могли бы вы также указать стили для мобильного представления?

2. Привет, Азу. Я просто хочу, чтобы каждый столбец был полной ширины, но, следуя таблице выше, столбцы будут в порядке 1,2,4,5,3,6.

3. Привет, Мэй, я не понял, хотите вы или не хотите, чтобы столбцы были 1,2 /4,5 /3,6?

4. Привет @azu. Я добавил изображение, показывающее, чего я пытаюсь достичь. Спасибо

5. Спасибо, картинка имеет смысл. Вопрос — зачем вам это нужно <div class='row'> ? Можем ли мы использовать только 6 ячеек для всей сетки?

Ответ №1:

У вас есть 6 ячеек, и для мобильного просмотра вы можете использовать order свойство.

 .wrapper {
  display: flex;
  flex-wrap: wrap;
}
.wrapper> div {
  border:1px solid #000;/* only for showing here */
  min-height:20px;/* only for showing here */
}
@media all and (min-width: 401px) {

    .wrapper> div {
        width: 33%;
    }
}

@media all and (max-width: 400px) {
    .wrapper> div {
        width: 100%;    
    }
    .cell1 {
        order: 0;
    }
    .cell2 {
        order: 1;
    }
    .cell3 {
        order: 4;
    }
    .cell4 {
        order: 2;
    }
    .cell5 {
        order: 3;
    }
    .cell6 {
        order: 5;
    }   
} 
 <div class='wrapper'>
    
      <div class='cell1'>1</div>
      <div class='cell2'>2</div>
      <div class='cell3'>3</div>
      <div class='cell4'>4</div>
      <div class='cell5'>5</div>
      <div class='cell6'>6</div>

</div>
Метки: , , ,