CSS Rows as a grid layout

Question

Current:

.parent {
display: flex;
justify-content: center;
align-items: center;
}

.childs { #class for every child
  flex: 1 1 100%;
}

Good example:

How can I achive this with flex box?

So it doenst like like this, when I add new rows: (Bad example)

A grid layout is designed to be in a grid, flexbox would fit this better, but there is even an easier option, columns https://developer.mozilla.org/en-US/docs/Web/CSS/columns — Keith, Jan 30 '22 at 19:23
Are you looking for https://developer.mozilla.org/en-US/docs/Web/CSS/columns ? — Quentin, Jan 30 '22 at 19:26
Please show your HTML and any other relevant CSS. In particular how is the height of each element decided? Do you have to use flex because it would suit being laid out as a grid using grid-template-areas. — A Haworth, Jan 30 '22 at 19:26

score -1 · Answer 1 · answered Jan 30 '22 at 19:32

-1

maybe you can use flex-shrink = 0 it makes your boxes unshrinkable

answered Jan 30 '22 at 19:32

Kerem UYSAL

19
4

A Haworth · Answer 2 · 2022-01-31T02:57:12.250

flex is a rather one dimensional layout mechanism.

If allowed you might consider a grid instead where the cells can be laid out using a template and the dimensions of the cells are set by the grid definitions, not by the content of any one cell.

This is the template layout:

  'A B'
  'A B'
  'C B'
  'C D'
  'C D'
  '. D'

To give:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'A B' 'A B' 'C B' 'C D' 'C D' '. D';
  gap: 1vw;
  width: 50vw;
  aspect-ratio: 5 / 2;
  background: black;
  padding: 1vw;
}

.grid>* {
  border: red solid 2px;
}

.grid>div:nth-child(1) {
  grid-area: A;
}

.grid>div:nth-child(2) {
  grid-area: B;
}

.grid>div:nth-child(3) {
  grid-area: C;
}

.grid>div:nth-child(4) {
  grid-area: D;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS Rows as a grid layout

2 Answers2