programming css

Có đáng để học lưới css không?

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

điều kiện tiên quyết. Khái niệm cơ bản về HTML [nghiên cứu Giới thiệu về HTML] và ý tưởng về cách thức hoạt động của CSS [nghiên cứu Giới thiệu về CSS và các hộp Kiểu dáng. ]Khách quan. Để hiểu các khái niệm cơ bản về bố cục lưới cũng như cách triển khai nó với CSS Grid

Lưới là tập hợp các đường ngang và dọc tạo ra một mẫu để 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 tôi tạo bố cục trong đó các thành phần của chúng tôi sẽ không nhảy lung tung hoặc thay đổi độ rộng khi chúng tôi di chuyển từ trang này sang trang khác, mang lại tính nhất quán cao hơn trên trang web của chúng tôi

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

Sau 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 nó. Trước tiên, chúng ta sẽ xem xét các tính năng cơ bản của Bố cục lưới 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

Video sau đây cung cấp giải thích trực quan về cách sử dụng CSS Grid

Để bắt đầu, hãy tải xuống và mở tệp điểm bắt đầu trong trình soạn thảo văn bản và trình duyệt của bạn [bạn cũng có thể xem trực tiếp tại đây]. Bạn sẽ thấy một ví dụ về vùng chứa có một số mục con. Theo mặc định, các hộp này hiển thị theo quy trình bình thường, do đó, các hộp hiển thị cái này bên dưới cái kia. Chúng ta sẽ làm việc với tệp này trong phần đầu tiên của bài học này, thực hiện các thay đổi để xem lưới của nó hoạt động như thế nào

Để xác định lưới, chúng tôi sử dụng giá trị

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}

9 của thuộc tính


  One
  Two
  Three
  Four
  Five
  Six
  Seven

0. Như với Flexbox, điều này kích hoạt Grid Layout; . Thêm phần này vào CSS bên trong tệp của bạn

.container {
  display: grid;
}

Không giống như Flexbox, các mặt hàng sẽ không khác ngay lập tức. Khai báo


  One
  Two
  Three
  Four
  Five
  Six
  Seven

1 cung cấp cho bạn một lưới một cột, vì vậy các mục của bạn sẽ tiếp tục hiển thị cái này bên dưới cái kia giống như chúng thực hiện trong quy trình bình thường

Để xem thứ gì đó trông giống lưới hơn, chúng ta sẽ cần thêm một số cột vào lưới. Hãy thêm ba cột 200 pixel. Bạn có thể sử dụng bất kỳ đơn vị độ dài hoặc tỷ lệ phần trăm nào để tạo các rãnh cột này

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

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

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}


  One
  Two
  Three
  Four
  Five
  Six
  Seven

Ngoài việc tạo lưới sử dụng độ dài và tỷ lệ phần trăm, chúng ta có thể sử dụng đơn vị


  One
  Two
  Three
  Four
  Five
  Six
  Seven

2 để định cỡ linh hoạt các hàng và cột của lưới. Đơn vị này đại diện cho một phần không gian có sẵn trong vùng chứa lưới

Thay đổi danh sách bản nhạc của bạn thành định nghĩa sau, tạo ba bản nhạc


  One
  Two
  Three
  Four
  Five
  Six
  Seven

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

Bây giờ bạn sẽ thấy rằng bạn có các bản nhạc linh hoạt. Đơn vị


  One
  Two
  Three
  Four
  Five
  Six
  Seven

2 phân phối không gian theo tỷ lệ. Vì vậy, nếu bạn chỉ định các giá trị dương khác nhau cho các bản nhạc của mình như vậy


  One
  Two
  Three
  Four
  Five
  Six
  Seven

Bản nhạc đầu tiên hiện có


  One
  Two
  Three
  Four
  Five
  Six
  Seven

5 dung lượng trống và hai bản nhạc còn lại nhận được


  One
  Two
  Three
  Four
  Five
  Six
  Seven

3, làm cho bản nhạc đầu tiên lớn hơn. Bạn có thể kết hợp các đơn vị


  One
  Two
  Three
  Four
  Five
  Six
  Seven

2 với các đơn vị có độ dài cố định — trong trường hợp như vậy, không gian cần thiết cho các rãnh cố định sẽ được sử dụng hết trước;

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}


  One
  Two
  Three
  Four
  Five
  Six
  Seven

Ghi chú. Đơn vị


  One
  Two
  Three
  Four
  Five
  Six
  Seven

2 phân phối không gian có sẵn, không phải tất cả không gian. Do đó, nếu một trong các bản nhạc của bạn có thứ gì đó lớn bên trong thì sẽ có ít dung lượng trống hơn để chia sẻ

Để tạo khoảng cách giữa các bản nhạc, chúng tôi sử dụng các thuộc tính


  One
  Two
  Three
  Four
  Five
  Six
  Seven

9 cho khoảng cách giữa các cột,

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

0 cho khoảng cách giữa các hàng và

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

1 làm cách viết tắt cho cả hai

.container {
  display: grid;
}

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


  One
  Two
  Three
  Four
  Five
  Six
  Seven

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}


  One
  Two
  Three
  Four
  Five
  Six
  Seven

Ghi chú. Các thuộc tính

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

1 [


  One
  Two
  Three
  Four
  Five
  Six
  Seven

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

0 và

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

1] từng có tiền tố là

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

7, nhưng điều này đã được thay đổi trong thông số kỹ thuật để giúp chúng có thể sử dụng được trong nhiều phương pháp bố cục. Các phiên bản có tiền tố sẽ được duy trì dưới dạng bí danh, vì vậy chúng sẽ an toàn để sử dụng trong một thời gian. Để đảm bảo an toàn, bạn có thể tăng gấp đôi và thêm cả hai thuộc tính để làm cho mã của bạn chống đạn hơn

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

Bạn có thể lặp lại tất cả hoặc chỉ một phần trong danh sách bản nhạc của mình bằng cách sử dụng hàm CSS

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

8. Thay đổi danh sách theo dõi của bạn như sau

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

Bây giờ, bạn sẽ nhận được ba bản nhạc


  One
  Two
  Three
  Four
  Five
  Six
  Seven

3 như trước đây. Giá trị đầu tiên được chuyển đến hàm

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

8 chỉ định số lần bạn muốn danh sách lặp lại, trong khi giá trị thứ hai là danh sách bản nhạc, có thể là một hoặc nhiều bản nhạc bạn muốn lặp lại

Cho đến nay, chúng tôi chỉ chỉ định theo dõi cột, nhưng các hàng đang được tạo để chứa nội dung của chúng tôi. Đây là một ví dụ về lưới rõ ràng so với lưới ngầm. Lưới rõ ràng là lưới mà bạn tạo bằng cách sử dụng


  One
  Two
  Three
  Four
  Five
  Six
  Seven

11 hoặc


  One
  Two
  Three
  Four
  Five
  Six
  Seven

12. Lưới ẩn mở rộng lưới rõ ràng đã xác định khi nội dung được đặt bên ngoài lưới đó, chẳng hạn như vào các hàng của chúng tôi bằng cách vẽ các đường lưới bổ sung

Theo mặc định, các bản nhạc được tạo trong lưới ngầm có kích thước


  One
  Two
  Three
  Four
  Five
  Six
  Seven

13, điều này nói chung có nghĩa là chúng đủ lớn để chứa nội dung của chúng. Nếu bạn muốn cung cấp kích thước cho các rãnh lưới ẩn, bạn có thể sử dụng các thuộc tính


  One
  Two
  Three
  Four
  Five
  Six
  Seven

14 và


  One
  Two
  Three
  Four
  Five
  Six
  Seven

15. Nếu bạn thêm


  One
  Two
  Three
  Four
  Five
  Six
  Seven

14 với giá trị


  One
  Two
  Three
  Four
  Five
  Six
  Seven

17 vào CSS của mình, bạn sẽ thấy rằng các hàng đã tạo đó hiện có chiều cao 100 pixel

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}


  One
  Two
  Three
  Four
  Five
  Six
  Seven

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

Các rãnh cao 100 pixel của chúng tôi sẽ không hữu ích lắm nếu chúng ta thêm nội dung vào các rãnh cao hơn 100 pixel đó, trong trường hợp đó sẽ gây ra tràn. Có thể tốt hơn nếu có các bản nhạc cao ít nhất 100 pixel và vẫn có thể mở rộng nếu có thêm nội dung. Một thực tế khá cơ bản về web là bạn không bao giờ thực sự biết thứ gì đó sẽ cao bao nhiêu — nội dung bổ sung hoặc kích thước phông chữ lớn hơn có thể gây ra sự cố với các thiết kế cố gắng trở thành pixel hoàn hảo ở mọi kích thước

Hàm


  One
  Two
  Three
  Four
  Five
  Six
  Seven

18 cho phép chúng tôi đặt kích thước tối thiểu và tối đa cho một bản nhạc, ví dụ:


  One
  Two
  Three
  Four
  Five
  Six
  Seven

19. Kích thước tối thiểu là 100 pixel, nhưng tối đa là


  One
  Two
  Three
  Four
  Five
  Six
  Seven

13, kích thước này sẽ mở rộng để chứa nhiều nội dung hơn. Hãy thử thay đổi


  One
  Two
  Three
  Four
  Five
  Six
  Seven

14 để sử dụng giá trị tối thiểu

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

Nếu bạn thêm nội dung bổ sung, bạn sẽ thấy rằng bản nhạc mở rộng để phù hợp với bản nhạc. Lưu ý rằng việc mở rộng xảy ra ngay dọc theo hàng

Chúng ta có thể kết hợp một số bài học đã học về danh sách bản nhạc, ký hiệu lặp lại và


  One
  Two
  Three
  Four
  Five
  Six
  Seven

18 để tạo ra một mẫu hữu ích. Đôi khi, thật hữu ích khi có thể yêu cầu lưới tạo bao nhiêu cột vừa với vùng chứa. Chúng tôi thực hiện việc này bằng cách đặt giá trị của


  One
  Two
  Three
  Four
  Five
  Six
  Seven

11 bằng cách sử dụng hàm

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

8, nhưng thay vì nhập một số, hãy nhập từ khóa

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}

5. Đối với tham số thứ hai của chức năng, chúng tôi sử dụng


  One
  Two
  Three
  Four
  Five
  Six
  Seven

18 với giá trị tối thiểu bằng kích thước bản nhạc tối thiểu mà chúng tôi muốn có và tối đa là


  One
  Two
  Three
  Four
  Five
  Six
  Seven

Hãy thử điều này trong tệp của bạn ngay bây giờ bằng cách sử dụng CSS bên dưới

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}


  One
  Two
  Three
  Four
  Five
  Six
  Seven

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

Điều này hoạt động vì lưới đang tạo ra càng nhiều cột 200 pixel vừa với vùng chứa, 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à


  One
  Two
  Three
  Four
  Five
  Six
  Seven

3, như chúng ta đã biết, phân phối không gian đồng đều giữa các rãnh

Bây giờ chúng ta chuyển từ tạo lưới sang đặt mọi thứ trên lưới. Lưới của chúng tôi luôn có các dòng — những dòng này được đánh số bắt đầu bằng 1 và liên quan đến chế độ viết của tài liệu. Ví dụ: dòng cột 1 bằng tiếng Anh [viết từ trái sang phải] sẽ ở phía bên trái của lưới và dòng 1 ở trên cùng, trong khi bằng tiếng Ả Rập [viết từ phải sang trái], dòng cột 1

Chúng ta có thể sắp xếp mọi thứ theo những dòng này bằng cách chỉ định dòng bắt đầu và kết thúc. Chúng tôi làm điều này bằng cách sử dụng các thuộc tính sau

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}


  One
  Two
  Three
  Four
  Five
  Six
  Seven


  One
  Two
  Three
  Four
  Five
  Six
  Seven


  One
  Two
  Three
  Four
  Five
  Six
  Seven

Tất cả các thuộc tính này có thể có một số dòng làm giá trị của chúng. Bạn cũng có thể sử dụng các thuộc tính tốc ký


  One
  Two
  Three
  Four
  Five
  Six
  Seven


  One
  Two
  Three
  Four
  Five
  Six
  Seven

Chúng cho phép bạn chỉ định dòng bắt đầu và dòng kết thúc cùng một lúc, được phân tách bằng dấu gạch chéo về phía trước


  One
  Two
  Three
  Four
  Five
  Six
  Seven

Tải xuống tệp này làm điểm bắt đầu hoặc xem trực tiếp tại đây. Nó có một lưới được xác định và một bài báo đơn giản được phác thảo. Bạn có thể thấy rằng vị trí tự động đang đặt từng mục vào ô riêng của nó trên lưới

Thay vào đó, hãy sắp xếp tất cả các yếu tố cho trang web của chúng ta bằng cách sử dụng các đường lưới. Thêm các quy tắc sau vào cuối CSS của bạn

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}

Ghi chú. Bạn cũng có thể sử dụng giá trị


  One
  Two
  Three
  Four
  Five
  Six
  Seven

6 để nhắm mục tiêu cột cuối hoặc dòng hàng, sau đó tính từ cuối vào trong bằng cách sử dụng các giá trị âm. Cũng lưu ý rằng các dòng luôn được tính từ các cạnh của lưới rõ ràng, không phải lưới ẩn

Một cách khác để sắp xếp các mục trên lưới của bạn là sử dụng thuộc tính


  One
  Two
  Three
  Four
  Five
  Six
  Seven

7 và đặt tên cho các yếu tố khác nhau trong thiết kế của bạn

Xóa định vị dựa trên dòng khỏi ví dụ trước [hoặc tải xuống lại tệp để có điểm bắt đầu mới] và thêm CSS sau

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}

Tải lại trang và bạn sẽ thấy rằng các mặt hàng của bạn đã được đặt như trước mà chúng tôi không cần sử dụng bất kỳ số dòng nào

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}

Các quy tắc cho


  One
  Two
  Three
  Four
  Five
  Six
  Seven

7 như sau

Bạn cần phải lấp đầy mọi ô của lưới
Để mở rộng trên hai ô, hãy lặp lại tên

Để trống một ô, hãy sử dụng


  One
  Two
  Three
  Four
  Five
  Six
  Seven

9 [dấu chấm]

Các khu vực phải là hình chữ nhật — ví dụ: bạn không thể có khu vực hình chữ L
Các khu vực không thể được lặp lại ở các vị trí khác nhau

Bạn có thể chơi xung quanh với bố cục của chúng tôi, thay đổi chân trang để chỉ nằm bên dưới bài viết và thanh bên để kéo dài xuống dưới. Đây là một cách rất hay để mô tả bố cục vì rõ ràng chỉ cần nhìn vào CSS là biết chính xác điều gì đang xảy ra

"Khung" lưới có xu hướng dựa trên lưới 12 hoặc 16 cột. Với CSS Grid, 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ó sẵn trong thông số kỹ thuật

Tải xuống tệp điểm bắt đầu. Cái này có một vùng chứa với lưới 12 cột được xác định và đánh dấu giống như chúng tôi đã sử dụng trong hai ví dụ trước. Giờ đây, chúng tôi có thể sử dụng vị trí dựa trên dòng để đặt nội dung của mình trên lưới 12 cột

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb[207, 232, 220];
  border: 2px solid rgb[79, 185, 227];
}

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

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . lưới

Trong phần tổng quan này, chúng tôi đã giới thiệu 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 các thiết kế của mình. Để tìm hiểu sâu hơn về thông số kỹ thuật, hãy đọc hướng dẫn của chúng tôi về Bố cục lưới, có thể tìm thấy bên dưới

Sử dụng grid CSS có tốt không?

Lợi ích của CSS Grid . CSS Grid cũng dễ sử dụng và được hầu hết các trình duyệt web hỗ trợ. Lưới CSS làm cho đánh dấu của bạn sạch hơn [trong mã HTML của bạn] và giúp bạn linh hoạt hơn rất nhiều. It makes it easy to create two-dimensional layouts. CSS Grid also easy to use and is supported by most web browsers. The CSS grid makes your mark-up cleaner [in your HTML code] and gives you a lot more flexibility.

Học CSS Grid có khó không?

Lưới CSS có vẻ hơi khó khăn với các ý tưởng bố cục và cú pháp mới, nhưng nó khá đơn giản và có thể được chia nhỏ thành một số .

Sử dụng grid CSS có tốt không?

Học CSS Grid có khó không?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề