Layout Generator

1<div class="layout flex">
2  <div class="row">
3    <div class="cell">Row 1, Cell 1</div>
4  </div>
5</div>

1
2.layout {
3  gap: 10px;
4}
5
6.row {
7  gap: 10px;
8  min-height: 100px;
9}
10
11.cell {
12  background-color: #e0e0e0;
13  padding: 1rem;
14  text-align: center;
15}
16
17@media (max-width: 768px) {
18  .row {
19    flex-wrap: wrap;
20  }
21  .cell {
22    flex-basis: calc(50% - 5px);
23  }
24}
25
26@media (max-width: 480px) {
27  .cell {
28    flex-basis: 100%;
29  }
30}
31
32.layout {
33  display: flex;
34  flex-direction: column;
35}
36
37.row {
38  display: flex;
39}
40
41.cell {
42  flex: 1;
43}
44