Так что для сайта, над которым я работаю, мне часто нужно иметь табличные представления, но часто отдельные строки в представлении также необходимо расширять, чтобы заполнить дополнительную информацию.В прошлом мы использовали flex для достижения этой цели, и это работает, но мы переходим к сеткам CSS, и я пытаюсь выяснить, есть ли лучшая практика для этого.То, что у меня есть, работает, но я еще недостаточно знаком с сеткой. У меня есть хорошее представление о лучших способах достижения этого.
Сейчас я использую col span для достижения этой цели, но не был уверенесли бы был лучший способ сделать этот тип поведения.
Я должен отметить, что число строк является переменным, я просто статически определил их в plunkr, чтобы сохранить код простым.
Вот примеры методов grid и flex, которые я использую.
https://plnkr.co/edit/T4HOvXG63ho4ONZoykhp
.wrapper{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: auto;
}
.expandRow{
grid-column: span 3;
}
.flex{
display:flex;
}
.flex1{
flex:1
}
<body>
<h3>Grid</h3>
<div class="wrapper">
<div>header</div>
<div>header</div>
<div>header</div>
<div>row1</div>
<div>row1</div>
<div>row1</div>
<div class="expandRow">
I'm an expansion of the row 1
</div>
<div>row2</div>
<div>row2</div>
<div>row2</div>
</div>
<div>
<h3>Flex</h3>
<div class="flex">
<div class="flex1">header</div>
<div class="flex1">header</div>
<div class="flex1">header</div>
</div>
<div>
<div class=flex>
<div class="flex1">row1</div>
<div class="flex1">row1</div>
<div class="flex1">row1</div>
</div>
<div>
I'm an expansion of the row 1
</div>
</div>
<div class=flex>
<div class="flex1">row2</div>
<div class="flex1">row2</div>
<div class="flex1">row2</div>
</div>
</div>
</body>