Сделайте несколько расколов в сетке CSS

Question

Мне было интересно, можно ли использовать сетку CSS для промежуточного разделения в столбцах, это выполнимо? Ниже приведен графический пример. Большое спасибо.

РЕДАКТИРОВАТЬ: я использую display: grid, то, что я пытаюсь достичь является чем-то отзывчивым, что поместит каждую ячейку под мобильное устройство.

Answer 1

Я только что создал нужный вам пример, но постараюсь убедиться, что вы присваиваете правильные имена (вместо col-x или row-y), например, navigation или sidebar.

Я бы рекомендовал просто удвоить количество строк и назначить количество строк дважды для левого столбца. Особенно обратите внимание на grid-template-areas в .grid CSS.

. Чтобы изменить внешний вид сетки на небольших устройствах, вы можете применить @media запросов к классу .grid, чтобы настроить * 1010. * attribute.

Этот пример ниже не является ни самым коротким, ни самым умным решением для этого, но я думаю, что он наиболее наглядный.

.grid {
  height: 200px;
  display: grid;
  grid-template-columns: 80% auto;
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas: 
    "col-1-row-1 col-2-row-1-1"
    "col-1-row-1 col-2-row-1-2"
    "col-1-row-2 col-2-row-2-1"
    "col-1-row-2 col-2-row-2-2"
    "col-1-row-3 col-2-row-3-1"
    "col-1-row-3 col-2-row-3-2"
}

.col-1-row-1,
.col-1-row-2,
.col-1-row-3,
.col-2-row-1-1,
.col-2-row-1-2,
.col-2-row-2-1,
.col-2-row-2-2,
.col-2-row-3-1,
.col-2-row-3-2 {
    justify-self: center;
    align-self: center;
}

.col-1-row-1 {
  grid-area: col-1-row-1;
}
.col-1-row-2 {
  grid-area: col-1-row-2;
}
.col-1-row-3 {
  grid-area: col-1-row-3;
}
.col-2-row-1-1 {
  grid-area: col-2-row-1-1;
}
.col-2-row-1-2 {
  grid-area: col-2-row-1-2;
}
.col-2-row-2-1 {
  grid-area: col-2-row-2-1;
}
.col-2-row-2-2 {
  grid-area: col-2-row-2-2;
}
.col-2-row-3-1 {
  grid-area: col-2-row-3-1;
}
.col-2-row-3-2 {
  grid-area: col-2-row-3-2;
}

<div class="grid">
    <div class="col-1-row-1">Col 1 Row 1</div>
    <div class="col-1-row-2">Col 1 Row 2</div>
    <div class="col-1-row-3">Col 1 Row 3</div>
    <div class="col-2-row-1-1">Col 2 Row 1.1</div>
    <div class="col-2-row-1-2">Col 2 Row 1.2</div>
    <div class="col-2-row-2-1">Col 2 Row 2.1</div>
    <div class="col-2-row-2-2">Col 2 Row 2.2</div>
    <div class="col-2-row-3-1">Col 2 Row 3.1</div>
    <div class="col-2-row-3-2">Col 2 Row 3.2</div>
</div>

Answer 2

Вы можете просто установить новый элемент html ниже (например) column2 / row1 и установить стиль как display: grid; grid-template: auto/auto; align-self: center