Preloader

Địa chỉ GPKD

128 Đ. Bình Mỹ, X. Bình Mỹ, H. Củ Chi, Tp. Hồ Chí Minh

Số điện thoại

+84 865920041

Email

info@photuesoftware.com
supports@photuesoftware.com

Blog Details

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

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

  • thumb
    By Phạm Thanh Long
  • Development
  • 11/09/2024
  • 10 minutes read
  • 350 Views

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
Plain text 

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>
Plain text 
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
Plain text 

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
Plain text 

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>
Plain text 
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]
Plain text 

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]
Plain text 

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>
Plain text 
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;
Plain text 

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>
Plain text 
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; }
Plain text 
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.

Tags:
    Share:
    Phạm Thanh Long
    Author

    Phạm Thanh Long

    Pho Tue SoftWare Solutions JSC là Nhà Cung cấp dịch Trung Tâm Dữ Liệu, Điện Toán Đám Mây Và Phát Triển Phần Mềm Hàng Đầu Việt Nam. Hệ Thống Data Center Đáp Ứng Mọi Nhu Cầu Với Kết Nối Internet Nhanh, Băng Thông Lớn, Uptime Lên Đến 99,99% Theo Tiêu Chuẩn TIER III-TIA 942.

    Leave a comment

    Your email address will not be published. Required fields are marked *

    Trải nghiệm của bạn trên trang này sẽ được cải thiện bằng cách cho phép cookie.