CSS Layout

CSS grid

CSS Grid Layout là một hệ thống layout hai chiều cho web. Nó cho phép bạn bố trí nội dung theo hàng và cột và có nhiều tính năng giúp xây dựng layout phức tạp. Bài viết này sẽ cung cấp cho bạn tất cả những gì bạn cần biết để bắt đầu với layout trang.

Điều kiện:	Có khái niệm HTML và CSS cơ bản
Kết quả thu được:	Hiểu các khái niệm cơ bản đằng sau các hệ thống grid layout và cách triển khai grid layout bằng CSS Grid.

What is grid layout?

Lưới là một tập hợp các đường ngang và dọc tạo ra một mô hình mà chúng ta có thể sắp xếp các yếu tố thiết kế của mình. Chúng giúp chúng ta tạo ra các thiết kế trong đó các phần tử không nhảy xung quanh hoặc thay đổi độ rộng khi chúng tôi chuyển từ trang này sang trang khác, mang lại sự thống nhất cao hơn trên các trang web.

Một lưới thường sẽ có các columns, các rows và sau đó là các khoảng trống giữa mỗi hàng và cột - thường được gọi là gutters.

Creating your grid in CSSSection

Khi đã quyết định lưới mà thiết kế của bạn cần, bạn có thể sử dụng CSS Grid Layout  để tạo lưới đó trong CSS và đặt các item lên trên lưới. Chúng ta sẽ xem xét các tính năng cơ bản của Grid Layout trước và sau đó khám phá cách tạo một hệ thống lưới đơn giản cho dự án của bạn.

Defining a gridSection

.container {
    display: grid;
}

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

Thêm khai báo thứ 2 vào CSS của bạn, sau đó tải lại trang và bạn sẽ thấy rằng các item đã tự sắp xếp lại một item vào mỗi ô của lưới đã tạo.

Flexible grids with the fr unit

Ngoài việc tạo lưới bằng cách sử dụng độ dài và tỷ lệ phần trăm, chúng ta có thể sử dụng đơn vị fr để linh hoạt kích thước các row và column lưới. Đơn vị này đại diện cho một phần không gian có sẵn chứa lưới.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Bây giờ bạn sẽ thấy rằng bạn có các layout linh hoạt. Đơn vị fr phân phối không gian theo tỷ lệ, do đó bạn có thể đưa ra các giá trị dương khác nhau cho các layout của mình, ví dụ: nếu bạn thay đổi định nghĩa như này:

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

Kết quả sẽ như sau:

Note: The fr unit distributes available space, not all space. Therefore if one of your tracks has something large inside it there will be less free space to share out.

Gaps between tracksSection

Để tạo các khoảng trống giữa các rãnh, chúng tôi sử dụng khoảng trống giữa các cột thuộc tính cho các khoảng trống giữa các cột, khoảng cách giữa hàng và lưới cho các khoảng trống giữa các hàng và khoảng cách lưới để đặt cả hai cùng một lúc.

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
}

Những khoảng trống này có thể là bất kỳ đơn vị độ dài hoặc tỷ lệ phần trăm, nhưng không phải là một đơn vị fr.

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}

Repeating track listingsSection

Bạn có thể lặp lại tất cả hoặc một phần trong danh sách layout của bạn bằng cách sử dụng ký hiệu lặp lại. Thay đổi danh sách theo dõi của bạn thành như sau:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

Giá trị đầu tiên được truyền cho hàm lặp lại là số lần bạn muốn danh sách lặp lại, trong khi giá trị thứ hai là danh sách theo dõi, có thể là một hoặc nhiều thuộc tính mà bạn muốn lặp lại.

The minmax() functionSection

Sử dụng minmax() 

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 20px;
}

Nếu bạn thêm nội dung bổ sung, bạn sẽ thấy thuộc tính mở rộng để cho phép nó phù hợp. Lưu ý rằng việc mở rộng xảy ra ngay ở row.

As many columns as will fitSection

Cho đoạn code sau vào file css:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}

Điều này hoạt động vì lưới đang tạo ra nhiều cột 200 pixel sẽ vừa với layout, sau đó chia sẻ bất kỳ khoảng trống nào còn lại giữa tất cả các cột - tối đa là 1fr, như chúng ta đã biết, phân phối không gian đều giữa các rãnh.

A CSS Grid, grid framework

Các "frameworks" lưới có xu hướng dựa trên các lưới 12 hoặc 16 cột và với Lưới CSS, bạn không cần bất kỳ công cụ bên thứ ba nào cung cấp cho bạn một khung như vậy - nó đã có trong thông số kỹ thuật.

Điều này có nghĩa là layout chứa lưới 12 cột được xác định và đánh dấu giống như chúng ta đã sử dụng trong hai ví dụ trước. Bây giờ chúng ta có thể sử dụng vị trí dựa trên dòng để đặt nội dung của chúng tôi trên lưới 12 cột.

header {
  grid-column: 1 / 13;
  grid-row: 1;
}

article {
  grid-column: 4 / 13;
  grid-row: 2;
}

aside {
  grid-column: 1 / 4;
  grid-row: 2;
}

footer {
  grid-column: 1 / 13;
  grid-row: 3;
}

Nếu bạn sử dụng Firefox Grid Inspector để kiểm tra các đường lưới trên thiết kế của bạn, bạn có thể thấy cách lưới 12 cột của chúng tôi hoạt động.

SummarySection

Trong tổng quan này, chúng tôi đã tham quan các tính năng chính của Bố cục lưới CSS. Bạn sẽ có thể bắt đầu sử dụng nó trong thiết kế của bạn. Để tìm hiểu sâu hơn về đặc tả kỹ thuật, hãy đọc hướng dẫn của chúng tôi về GridLayout.

REF: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids