Tìm hiểu CSS Grid Layout cơ bản

1451
09-09-2022
Tìm hiểu CSS Grid Layout cơ bản

Trình duyệt

Tìm hiểu CSS Grid Layout cơ bản - Ảnh 1.

CSS Grid Layout đã có những bước nhảy vọt trong những năm qua và do đó bạn sẽ thấy các trình duyệt hỗ trợ cho nó khá tốt tại thời điểm hiện tại.

Cài đặt một Grid

Grid cho phép sắp xếp các thành phần trên một trang theo các vùng.

Thuật ngữ

1. Columns (Cột)

Tìm hiểu CSS Grid Layout cơ bản - Ảnh 2.

Các hàng dọc của các thành phần grid được gọi là cột.Bạn có thể điều chỉnh cột dựa theo thuộc tính sau:

el.remove());" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='block' : null" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='none' : null" style="box-sizing: border-box; color: rgb(27, 27, 27); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: relative;">
grid-template-columns 

Ví dụ:

HTML:

el.remove());" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='block' : null" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='none' : null" style="box-sizing: border-box; color: rgb(27, 27, 27); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: relative;">
<div class="grid-container">   <div class="grid-item">1</div>   <div class="grid-item">2</div>   <div class="grid-item">3</div>     <div class="grid-item">4</div>   <div class="grid-item">5</div>   <div class="grid-item">6</div>     <div class="grid-item">7</div>   <div class="grid-item">8</div>   <div class="grid-item">9</div>   </div> 
1
2
3
4
5
6
7
8
9
" delay="2000" title="Sao chép" style="box-sizing: border-box; border-radius: 5px; margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; overflow: visible; text-transform: none; appearance: button; position: absolute; display: flex; align-items: center; justify-content: center; top: 7.5px; right: 6px; cursor: pointer; outline: none; border: none; background: rgb(101, 84, 84); height: 25px; opacity: 0.5;">
Tìm hiểu CSS Grid Layout cơ bản - Ảnh 3.

Tìm hiểu CSS Grid Layout cơ bản - Ảnh 4.

3 cột tự động cân bằng3 cột tùy chỉnh tỉ lệ
CSS.grid-container {display: grid; grid-template-columns: auto auto auto;}.grid-container {display: grid; grid-template-columns: 20% 30% 50%;}
Kết quả

2. Rows (Hàng)

Tìm hiểu CSS Grid Layout cơ bản - Ảnh 6.

Các hàng ngang của các thành phần grid được gọi là hàng.Bạn có thể điều chỉnh hàng dựa theo thuộc tính sau (tương tự như cột):

el.remove());" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='block' : null" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='none' : null" style="box-sizing: border-box; color: rgb(27, 27, 27); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: relative;">
grid-template-rows 

3. Gaps (Khoảng trống)

Tìm hiểu CSS Grid Layout cơ bản - Ảnh 7.

Khoảng cách giữa mỗi cột / hàng được gọi là khoảng trống.Bạn có thể điều chỉnh kích thước khoảng cách bằng cách sử dụng một trong các thuộc tính sau:

el.remove());" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='block' : null" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='none' : null" style="box-sizing: border-box; color: rgb(27, 27, 27); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: relative;">
grid-column-gap grid-row-gap grid-gap 

Ví dụ:

HTML:

el.remove());" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='block' : null" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='none' : null" style="box-sizing: border-box; color: rgb(27, 27, 27); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: relative;">
<div class="grid-container">   <div class="grid-item">1</div>   <div class="grid-item">2</div>   <div class="grid-item">3</div>     <div class="grid-item">4</div>   <div class="grid-item">5</div>   <div class="grid-item">6</div>     <div class="grid-item">7</div>   <div class="grid-item">8</div>   <div class="grid-item">9</div>   </div> 
1
2
3
4
5
6
7
8
9
" delay="2000" title="Sao chép" style="box-sizing: border-box; border-radius: 5px; margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; overflow: visible; text-transform: none; appearance: button; position: absolute; display: flex; align-items: center; justify-content: center; top: 7.5px; right: 6px; cursor: pointer; outline: none; border: none; background: rgb(101, 84, 84); height: 25px; opacity: 0.5;">
Tìm hiểu CSS Grid Layout cơ bản - Ảnh 8.

Tìm hiểu CSS Grid Layout cơ bản - Ảnh 9.

Tìm hiểu CSS Grid Layout cơ bản - Ảnh 10.

grid-column-gapgrid-row-gapgrid-gap
CSS.grid-container {display: grid; grid-column-gap: 50px;}.grid-container {display: grid; grid-row-gap: 50px;}.grid-container {display: grid; grid-gap: 30px 60px;}
Kết quả

4. Lines

Tìm hiểu CSS Grid Layout cơ bản - Ảnh 12.

Viền nằm giữa các cột và hàng.Bạn có thể tùy chỉnh gộp cột bằng cách css ở từng ô (cell) theo các thuộc tính sau

el.remove());" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='block' : null" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='none' : null" style="box-sizing: border-box; color: rgb(27, 27, 27); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: relative;">
grid-columns-start: [Line bắt đầu] grid-columns-end: [Line kết thúc] grid-row-start: [Line bắt đầu] grid-row-end: [Line kết thúc] 

hoặc

el.remove());" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='block' : null" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='none' : null" style="box-sizing: border-box; color: rgb(27, 27, 27); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: relative;">
grid-columns: [Line bắt đầu]/[Line kết thúc] grid-row: [Line bắt đầu]/[Line kết thúc] 

Ví dụ:

HTML:

el.remove());" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='block' : null" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='none' : null" style="box-sizing: border-box; color: rgb(27, 27, 27); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: relative;">
<div class="grid-container">   <div class="grid-item-1">1</div>   <div class="grid-item-2">2</div>   <div class="grid-item-3">3</div>     <div class="grid-item-4">4</div>   <div class="grid-item-5">5</div>   <div class="grid-item-6">6</div>     <div class="grid-item-7">7</div>   <div class="grid-item-8">8</div> </div> 
1
2
3
4
5
6
7
8
" delay="2000" title="Sao chép" style="box-sizing: border-box; border-radius: 5px; margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; overflow: visible; text-transform: none; appearance: button; position: absolute; display: flex; align-items: center; justify-content: center; top: 7.5px; right: 6px; cursor: pointer; outline: none; border: none; background: rgb(101, 84, 84); height: 25px; opacity: 0.5;">
Tìm hiểu CSS Grid Layout cơ bản - Ảnh 13.

Tìm hiểu CSS Grid Layout cơ bản - Ảnh 14.

gộp cột từ line 1 đến 3gộp hàng từ line 1 đến 3
CSS.grid-item-1 {grid-column-start: 1; grid-column-end: 3;}grid-item-1 {grid-row-start: 1; grid-row-end: 3;}
Kết quả
  • Ngoài ra bạn cũng có thể tùy chỉnh theo vùng bằng thuộc tính:
el.remove());" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='block' : null" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='none' : null" style="box-sizing: border-box; color: rgb(27, 27, 27); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: relative;">
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; 

Ví dụ:

HTML:

el.remove());" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='block' : null" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='none' : null" style="box-sizing: border-box; max-height: 300px; padding-bottom: 1rem; cursor: pointer; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 60%, transparent); color: rgb(27, 27, 27); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: relative;">
<div class="grid-container">   <div class="item1">1</div>   <div class="item2">2</div>   <div class="item3">3</div>     <div class="item4">4</div>   <div class="item5">5</div>   <div class="item6">6</div>   <div class="item7">7</div>   <div class="item8">8</div>     <div class="item9">9</div>   <div class="item10">10</div>   <div class="item11">11</div>   <div class="item12">12</div>   <div class="item13">13</div>   <div class="item14">14</div>   <div class="item15">15</div> </div> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
" delay="2000" title="Sao chép" style="box-sizing: border-box; border-radius: 5px; margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; overflow: visible; text-transform: none; appearance: button; position: absolute; display: flex; align-items: center; justify-content: center; top: 7.5px; right: 6px; cursor: pointer; outline: none; border: none; background: rgb(101, 84, 84); height: 25px; opacity: 0.5;">

CSS:

el.remove());" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='block' : null" ? this.getElementsByClassName('v-markdown-it-show-more')[0].style.display='none' : null" style="box-sizing: border-box; color: rgb(27, 27, 27); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: relative;">
.item8 {   grid-area: 1 / 2 / 5 / 6; } 
Tìm hiểu CSS Grid Layout cơ bản - Ảnh 16.

Kết quả:Cảm ơn các bạn đã theo dõi.

SHARE