Modern Layouts CSS

/* 1 */
.parent {  display: grid;  place-items: center;}

/* 2 */
.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
  /*or
  flex: 1 1 150px;*/
}

/* 3 */
.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}
/* 4 */
.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
/* 5 */
.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}
/* 6 */
.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}
/*
.child-span-12 {
  grid-column: 1 / span 12;
}*/
/* 7 */
.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/*
.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
*/
/* 8 */
.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* 9 */
.parent {
  width: clamp(23ch, 50%, 46ch);
}
/* 10 */
/* Some browsers won't work yet */
.video {
  aspect-ratio: 16 / 9;
}