index.css

.flex-container {
  display: flex;
  width: 300px;
}

.space {
  height: 50px;
}

.flex-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.flex-item:nth-child(1) {
  background-color: aquamarine;
  flex: 3 4;
}

.flex-item:nth-child(2) {
  background-color: burlywood;
  flex: 2 5;
}

.flex-item:nth-child(3) {
  background-color: thistle;
  flex: 1 3;
}

.grid-container {
  width: 400px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-template-areas:
    "header header header"
    "main main aside"
    ". footer .";
}

.grid-item {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.grid-item:nth-child(1) {
  background-color: silver;
  grid-area: header;
}

.grid-item:nth-child(2) {
  background-color: burlywood;
  grid-area: main;
}

.grid-item:nth-child(3) {
  background-color: thistle;
  grid-area: aside;
}

.grid-item:nth-child(4) {
  background-color: cadetblue;
  grid-area: footer;
}

.grid-container-2 {
  width: 400px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  gap: 20px 10px;
  grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer";
}

.grid-container-3 {
  width: 400px;
  display: grid;
  grid-template-rows: repeat(2, 90px);
  grid-template-columns: repeat(2, 1fr);
}

.grid-item-3:nth-child(1) {
  background-color: silver;
}

.grid-item-3:nth-child(2) {
  background-color: burlywood;
}

.grid-item-3:nth-child(3) {
  background-color: thistle;
}

.grid-item-3:nth-child(4) {
  background-color: cadetblue;
  order: -1;
}