Xây dựng layout là một trong những công việc quan trọng nhất của thiết kế website và với CSS hiện đại, các nhà phát triển Web có thể dễ dàng tạo ra những layout nhanh chóng và hiệu quả. Chuyên gia Google sẽ cung cấp một vài kỹ thuật CSS đơn giản mà vô cùng hiệu quả trong thiết kế layout:

Các thuộc tính CSS và mã nguồn tham khảo có thể được tìm thấy trong phần mô tả bên dưới video từ kênh Youtube. Để tiện lợi trong việc tra cứu hay sử dụng, bài viết sẽ liệt kê dưới đây:

  1. place-items: center
  2. flex: 0 1 <baseWidth>
  3. grid-template-columns: minmax(<min>, <max>) …
  4. grid-template-rows: auto 1fr auto
  5. grid-template: auto 1fr auto / auto 1fr auto
  6. grid-template-columns: repeat(12, 1fr)
  7. grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))
  8. justify-content: space-between
  9. clamp(<min>, <actual>, <max>)
  10. aspect-ratio: <width> / <height>