Hướng dẫn grid-area css - css vùng lưới

CSS Grid Layout là gì, ở bài viết này mình muốn giới thiệu một chút về nó qua một số ví dụ đơn giản để mọi người thấy được sự tiện dụng của nó để sau này có thể áp dụng được Grid Layout vào thực tế. là gì, ở bài viết này mình muốn giới thiệu một chút về nó qua một số ví dụ đơn giản để mọi người thấy được sự tiện dụng của nó để sau này có thể áp dụng được Grid Layout vào thực tế.

CSS Grid Layout là gì

Hệ thống Grid Layout của CSS cung cấp một hệ thống bố cục dạng lưới, với cột và hàng (Khá giống với col và row của Bootstrap) mà không còn cần sử dụng đến

.container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

3 hay

.container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

4

Đầu tiên, cái chúng ta cần quan tâm nhất là nó có thể sử dụng ở gần như tất cả các trình duyệt hiện đại.

Thuộc tính .container { display: grid; grid-template-columns: auto auto; background-color: #3e2723; padding: 10px; border-radius: 10px; } .item { background-color: #80cbc4; border: 1px solid #fff; padding: 20px; font-size: 30px; text-align: center; } 5

Một layout dạng lưới này phải có một element cha với

.container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

5 được set là

.container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

7 hay

.container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

8.

Khi dùng

.container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

9, chúng ta sẽ được một container chứa grid dưới dạng block

HTML

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8

CSS

.container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

Và chúng ta sẽ có:

Chúng ta có thể thay đổi kích thước các cột như sau:

CSS

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

Và chúng ta sẽ có:

Chúng ta có thể thay đổi kích thước các cột như sau:

CSS

Và chúng ta sẽ có:

Chúng ta có thể thay đổi kích thước các cột như sau:

CSS

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

Và chúng ta sẽ có:

Chúng ta có thể thay đổi kích thước các cột như sau:

CSS

.container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  
  grid-column-gap: 10px;
  grid-row-gap: 25px;
 
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 40px;
  font-size: 30px;
  text-align: center;
}

Và chúng ta sẽ có:

Chúng ta có thể thay đổi kích thước các cột như sau:

Các bạn có thể tùy biến layout của bạn ở đây

Tương tự như

.container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

9,

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

1 sẽ khiến tạo một container inline.

HTML

    
1
    
2
    
3
    
4
    
5
    
6
    
7

CSS

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.container > div {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 40px;
  font-size: 30px;
  text-align: center;
}
.item1,  .item6 {
  grid-column-start: 1;
  grid-column-end: 3;
  //hoặc có thể viết ngắn hơn bằng "grid-column":
  //grid-column: 1 / 3;
}

Và chúng ta sẽ có:

.item1, .item6 {
   grid-row: 1 / 3;
}

Chúng ta có thể thay đổi kích thước các cột như sau:

Các bạn có thể tùy biến layout của bạn ở đây

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    
11

.container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

0

Tương tự như

.container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

9,

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

1 sẽ khiến tạo một container inline.

.container {
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 40px;
  font-size: 30px;
  text-align: center;
}

Chúng ta cũng có thể tùy biến được các hàng (rows) một cách đơn giản.

Khoảng cách trong Grid

HTML

.container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

1

CSS

.container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

2

.container {
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}
.item {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 40px;
  font-size: 30px;
  text-align: center;
}

Chúng ta cũng có thể tùy biến được các hàng (rows) một cách đơn giản.

Khoảng cách trong Grid