Hướng dẫn về CSS Grid

CSS Grid là đứa trẻ mới trong thị trấn CSS và mặc dù chưa được hỗ trợ đầy đủ bởi tất cả các trình duyệt, nó sẽ là hệ thống bố cục trong tương lai

Cái lưới sắt. Biên giới kỹ thuật số. Tôi cố gắng hình dung các cụm thông tin khi chúng di chuyển qua máy tính. Họ trông như thế nào? Tàu thuyền? Xe máy? Các mạch có giống như đường cao tốc không? Tôi đã tiếp tục mơ về một thế giới mà tôi nghĩ rằng tôi sẽ không bao giờ nhìn thấy. Và rồi một ngày .. tôi tham gia. - Tron: Legacy

Giới thiệu về CSS Grid

CSS Grid là một cách tiếp cận mới về cơ bản để xây dựng bố cục bằng CSS.

Hãy để mắt đếnTrang Bố cục Lưới CSS trên caniuse.comđể tìm hiểu những trình duyệt nào hiện đang hỗ trợ nó. Tại thời điểm viết bài, tháng 4 năm 2019, tất cả các trình duyệt chính (ngoại trừ IE, sẽ không bao giờ có hỗ trợ cho nó) đều đã hỗ trợ công nghệ này, bao phủ 92% tất cả người dùng.

CSS Grid không phải là đối thủ củaFlexbox. Chúng tương tác và cộng tác trên các bố cục phức tạp, vì CSS Grid hoạt động trên 2 thứ nguyên (hàng VÀ cột) trong khi Flexbox hoạt động trên một thứ nguyên (hàng HOẶC cột).

Xây dựng bố cục cho web theo truyền thống là một chủ đề phức tạp.

Tôi sẽ không đi sâu vào lý do của sự phức tạp này, đây là một chủ đề phức tạp, nhưng bạn có thể nghĩ mình là một con người rất may mắn vì ngày naybạn có 2 công cụ rất mạnh mẽ và được hỗ trợ tốt theo ý của bạn:

  • CSS Flexbox
  • Lưới CSS

Đây là 2 công cụ để xây dựng bố cục Web của tương lai.

Trừ khi bạn cần hỗ trợ các trình duyệt cũ như IE8 và IE9, không có lý do gì để bạn phải làm phiền những thứ như:

  • Bố cục bảng
  • Phao
  • hack clearfix
  • display: tablehack

Trong hướng dẫn này, có tất cả những gì bạn cần biết về việc từ một kiến thức không có về CSS Grid trở thành một người dùng thành thạo.

Những thứ cơ bản

Bố cục Lưới CSS được kích hoạt trên một phần tử vùng chứa (có thể làdivhoặc bất kỳ thẻ nào khác) bằng cách cài đặtdisplay: grid.

Như với flexbox, bạn có thể xác định một số thuộc tính trên vùng chứa và một số thuộc tính trên từng mục riêng lẻ trong lưới.

Các thuộc tính này kết hợp với nhau sẽ xác định giao diện cuối cùng của lưới.

Các thuộc tính cơ bản nhất của vùng chứa làgrid-template-columnsvàgrid-template-rows.

lưới-mẫu-cột và lưới-mẫu-hàng

Các thuộc tính đó xác định số lượng cột và hàng trong lưới, đồng thời chúng cũng đặt chiều rộng của mỗi cột / hàng.

Đoạn mã sau xác định lưới có 4 cột, mỗi cột rộng 200px và 2 hàng có chiều cao 300px mỗi hàng.

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

A grid with 4 columns and 2 rows

Đây là một ví dụ khác về lưới có 2 cột và 2 hàng:

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

A grid with 2 columns and 2 rows

Kích thước tự động

Nhiều khi bạn có thể có kích thước đầu trang cố định, kích thước chân trang cố định và nội dung chính có chiều cao linh hoạt, tùy thuộc vào độ dài của nó. Trong trường hợp này, bạn có thể sử dụngautotừ khóa:

.container {
  display: grid;
  grid-template-rows: 100px auto 100px;
}

Các kích thước cột và hàng khác nhau

Trong các ví dụ trên, chúng tôi đã tạo các lưới thông thường, đẹp mắt bằng cách sử dụng các giá trị giống nhau cho các hàng và các giá trị giống nhau cho các cột.

Bạn có thể chỉ định bất kỳ giá trị nào cho mỗi hàng / cột, để tạo ra nhiều thiết kế khác nhau:

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

A grid with varying columns and rows dimensions

Một vi dụ khac:

.container {
  display: grid;
  grid-template-columns: 10px 100px;
  grid-template-rows: 100px 10px;
}

A grid with varying columns and rows dimensions

Thêm khoảng trống giữa các ô

Trừ khi được chỉ định, không có khoảng trống giữa các ô.

Bạn có thể thêm khoảng cách bằng cách sử dụng các thuộc tính đó:

  • grid-column-gap
  • grid-row-gap

hoặc cú pháp viết tắtgrid-gap.

Thí dụ:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

A grid with gap between rows and columns

Bố cục tương tự bằng cách sử dụng tốc ký:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-gap: 25px;
}

Sinh sản các mục trên nhiều cột và / hoặc hàng

Mỗi mục ô đều có tùy chọn để chỉ chiếm nhiều hơn một ô trong hàng và mở rộng theo chiều ngang hoặc chiều dọc để có thêm không gian, đồng thời tôn trọng tỷ lệ lưới được đặt trong vùng chứa.

Đó là những thuộc tính chúng tôi sẽ sử dụng cho việc đó:

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end

Thí dụ:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
.item6 {
  grid-column-start: 3;
  grid-column-end: 5;
}

Editing the dimensions of some cells

Các số tương ứng với đường thẳng đứng phân tách mỗi cột, bắt đầu từ 1:

The numbers correspond to the vertical line that separates each column

Nguyên tắc tương tự áp dụng chogrid-row-startvàgrid-row-end, ngoại trừ lần này thay vì chiếm nhiều cột hơn, một ô sẽ chiếm nhiều hàng hơn.

Cú pháp viết tắt

Các thuộc tính đó có cú pháp viết tắt được cung cấp bởi:

  • grid-column
  • grid-row

Cách sử dụng rất đơn giản, đây là cách sao chép bố cục trên:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / 4;
}
.item6 {
  grid-column: 3 / 5;
}

Sử dụnggrid-areanhư một cách viết tắt

Cácgrid-areathuộc tính có thể được sử dụng như một cách viết tắt chogrid-columnvàgrid-rowshorthands, khi bạn cần áp dụng cả hai cho một phần tử duy nhất. Thay vì có:

.item1 {
  grid-row: 1 / 4;
  grid-column: 3 / 5;
}

Bạn có thể dùng

.item1 {
  grid-area: 1 / 3 / 4 / 5;
}

(lưới-hàng-bắt đầu / lưới-cột-bắt đầu / lưới-hàng-kết thúc / lưới-cột-kết thúc)

Sử dụngspan

Một cách tiếp cận khác là đặt cột / hàng bắt đầu và đặt số lượng cột / hàng đó sẽ chiếm bằng cách sử dụngspan:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / span 2;
}
.item6 {
  grid-column: 3 / span 2;
}

spancũng hoạt động với cú pháp không viết tắt:

.item1 {
  grid-column-start: 2;
  grid-column-end: span 2;
}

và bạn cũng có thể sử dụng trên thuộc tính bắt đầu. Trong trường hợp này, vị trí kết thúc sẽ được sử dụng làm tham chiếu vàspansẽ đếm "trở lại":

.item1 {
  grid-column-start: span 2;
  grid-column-end: 3;
}

Thêm cấu hình lưới

Sử dụng phân số

Chỉ định chiều rộng chính xác của mỗi cột hoặc hàng không phải là lý tưởng trong mọi trường hợp.

Một phân số là một đơn vị không gian.

Ví dụ sau chia lưới thành 3 cột có cùng chiều rộng,1⁄3của không gian có sẵn mỗi.

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

Sử dụng tỷ lệ phần trăm và rem

Bạn cũng có thể sử dụng tỷ lệ phần trăm và trộn và kết hợp các phân số, pixel, rem và tỷ lệ phần trăm:

.container {
  grid-template-columns: 3rem 15% 1fr 2fr
}

Sử dụngrepeat()

repeat()là một hàm đặc biệt nhận một số cho biết số lần một hàng / cột sẽ được lặp lại và độ dài của mỗi hàng.

Nếu mọi cột có cùng chiều rộng, bạn có thể chỉ định bố cục bằng cú pháp sau:

.container {
  grid-template-columns: repeat(4, 100px);
}

Điều này tạo ra 4 cột có cùng chiều rộng.

Hoặc sử dụng phân số:

.container {
  grid-template-columns: repeat(4, 1fr);
}

Chỉ định chiều rộng tối thiểu cho một hàng

Trường hợp sử dụng phổ biến: Có một thanh bên không bao giờ thu gọn hơn một lượng pixel nhất định khi bạn thay đổi kích thước cửa sổ.

Đây là một ví dụ mà thanh bên sử dụng1⁄4của màn hình và không bao giờ có kích thước nhỏ hơn 200px:

.container {
  grid-template-columns: minmax(200px, 3fr) 9fr;
}

Bạn cũng có thể chỉ đặt một giá trị tối đa bằng cách sử dụngautotừ khóa:

.container {
  grid-template-columns: minmax(auto, 50%) 9fr;
}

hoặc chỉ một giá trị tối thiểu:

.container {
  grid-template-columns: minmax(100px, auto) 9fr;
}

Định vị các yếu tố bằng cách sử dụnggrid-template-areas

Theo mặc định, các phần tử được định vị trong lưới bằng cách sử dụng thứ tự của chúng trong cấu trúc HTML.

Sử dụnggrid-template-areasBạn có thể xác định các khu vực mẫu để di chuyển chúng xung quanh trong lưới và cũng để tạo ra một mục trên nhiều hàng / cột thay vì sử dụnggrid-column.

Đây là một ví dụ:

<div class="container">
  <main>
    ...
  </main>
  <aside>
    ...
  </aside>
  <header>
    ...
  </header>
  <footer>
    ...
  </footer>
</div>
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    "header header header header"
    "sidebar main main main"
    "footer footer footer footer";
}
main {
  grid-area: main;
}
aside {
  grid-area: sidebar;
}
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}

Bất chấp đơn đặt hàng ban đầu, các mặt hàng được đặt ở đâugrid-template-areasxác định, tùy thuộc vàogrid-areatài sản liên quan đến chúng.

Thêm các ô trống trong các vùng mẫu

Bạn có thể đặt một ô trống bằng cách sử dụng dấu chấm.thay vì một tên khu vực tronggrid-template-areas:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    ". header header ."
    "sidebar . main main"
    ". footer footer .";
}

Điền vào một trang bằng lưới

Bạn có thể mở rộng lưới để lấp đầy trang bằng cách sử dụngfr:

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

Ví dụ: đầu trang, thanh bên, nội dung và chân trang

Đây là một ví dụ đơn giản về việc sử dụng CSS Grid để tạo bố cục trang web cung cấp phần đầu trang, phần chính với thanh bên ở bên trái và nội dung ở bên phải, sau đó là phần chân trang.

Layout example

Đây là đánh dấu:

<div class="wrapper">
  <header>Header</header>
  <article>
    <h1>Welcome</h1>
    <p>Hi!</p>
  </article>
  <aside><ul><li>Sidebar</li></ul></aside>
  <footer>Footer</footer>
</div>

và đây là CSS:

header {
  grid-area: header;
  background-color: #fed330;
  padding: 20px;
}
article {
  grid-area: content;
  background-color: #20bf6b;
  padding: 20px;
}
aside {
  grid-area: sidebar;
  background-color: #45aaf2;
}
footer {
  padding: 20px;
  grid-area: footer;
  background-color: #fd9644;
}
.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

Tôi đã thêm một số màu để làm cho nó đẹp hơn, nhưng về cơ bản nó chỉ định cho mọi thẻ khác nhau agrid-areatên, được sử dụng tronggrid-template-areastài sản trong.wrapper.

Khi bố cục nhỏ hơn, chúng tôi có thể đặt thanh bên bên dưới nội dung bằng cách sử dụng truy vấn phương tiện:

@media (max-width: 500px) {
  .wrapper {
    grid-template-columns: 4fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

Xem trên CodePen

Xem bútVí dụ về CSS Grid với thanh bênbởi Flavio Copes (@flaviocopes) trênCodePen.

Tech Wiki Online!