Series 2 — Frontend Fundamentals

 

HTML → Sematic HTML → Forms & Validation → CSS

 Flexbox & Grid → Responsive Web Design → Bootstrap

 

Bài 4. CSS Fundamentals – CSS là gì?

 

CSS Fundamentals – CSS là gì và hoạt động như thế nào?

Ở những bài trước, chúng ta đã tìm hiểu cách HTML xây dựng cấu trúc Website, cách sử dụng Semantic HTML để mô tả ý nghĩa nội dung và cách tạo Form để thu thập dữ liệu người dùng.

Tuy nhiên, HTML chủ yếu mô tả cấu trúc và nội dung. Để kiểm soát màu sắc, kích thước, khoảng cách, kiểu chữ và bố cục, chúng ta cần một công nghệ khác: CSS.

CSS là nền tảng quan trọng trong Frontend Development. Nếu HTML giúp xác định Website có những thành phần nào, thì CSS giúp chúng ta quyết định những thành phần đó sẽ được hiển thị như thế nào.

1. CSS là gì?

CSS là viết tắt của Cascading Style Sheets, hay ngôn ngữ định kiểu theo tầng.

CSS được sử dụng để mô tả cách các phần tử HTML được trình bày trên giao diện, bao gồm:

• Màu sắc và hình nền.
• Font chữ và kích thước văn bản.
• Chiều rộng và chiều cao.
• Margin và Padding.
• Vị trí và cách sắp xếp phần tử.
• Hiệu ứng chuyển động và tương tác trực quan.
• Cách giao diện thích ứng với các kích thước màn hình.

Ví dụ, với HTML:

<h1>Hello World</h1>
<p>Welcome to my website.</p>

Nếu không có CSS tùy chỉnh, Browser vẫn hiển thị nội dung bằng các kiểu mặc định.

Khi thêm CSS:

h1 {
    color: #143c3c;
    font-size: 32px;
}

p {
    color: #555;
    line-height: 1.6;
}

Tiêu đề sẽ có màu xanh đậm, kích thước 32px, còn đoạn văn sẽ có màu xám và khoảng cách dòng rộng hơn.

Ví dụ này cho thấy CSS có thể thay đổi cách hiển thị mà không cần thay đổi nội dung HTML.

2. CSS hoạt động như thế nào?

CSS thường được viết dưới dạng các quy tắc định kiểu.

Một quy tắc CSS cơ bản gồm ba thành phần:

h1 {
    color: red;
    font-size: 32px;
}

Trong đó:

• h1 là Selector – bộ chọn phần tử.
• color và font-size là Properties – thuộc tính.
• red và 32px là Values – giá trị tương ứng.

Cấu trúc tổng quát:

selector {
    property: value;
}

Khi Browser phân tích HTML và CSS, nó xác định những quy tắc nào áp dụng cho từng phần tử, tính toán kiểu hiển thị cuối cùng rồi sử dụng kết quả đó trong quá trình render giao diện.

Có thể hình dung:

HTML → DOM
CSS  → CSSOM
        ↓
Tính toán kiểu hiển thị
        ↓
Layout → Paint
        ↓
Giao diện trên màn hình

Đây là sơ đồ khái quát. Trong thực tế, trình duyệt có thể xử lý lại kiểu và bố cục nhiều lần khi nội dung, CSS hoặc kích thước màn hình thay đổi.

3. Ba cách sử dụng CSS trong HTML

Có ba cách phổ biến để áp dụng CSS.

3.1. Inline CSS

Viết CSS trực tiếp trong thuộc tính style của phần tử HTML.

<h1 style="color: red; font-size: 32px;">
    Hello World
</h1>

Ưu điểm là nhanh và đơn giản khi thử nghiệm.

Nhược điểm là khó tái sử dụng, khiến HTML khó đọc và khó bảo trì khi dự án lớn lên.

3.2. Internal CSS

Viết CSS bên trong thẻ style, thường đặt trong head.

<head>
    <style>
        h1 {
            color: blue;
        }

        p {
            font-size: 16px;
        }
    </style>
</head>

Cách này phù hợp với ví dụ nhỏ hoặc tài liệu đơn giản, nhưng có thể làm HTML dài hơn khi dự án có nhiều quy tắc CSS.

3.3. External CSS

Tách CSS thành một file riêng và liên kết với HTML.

File index.html:

<head>
    <link rel="stylesheet" href="./style.css">
</head>

File style.css:

h1 {
    color: #143c3c;
}

p {
    font-size: 16px;
    line-height: 1.6;
}

Đây là cách tổ chức phổ biến trong các dự án Web truyền thống vì giúp tách cấu trúc HTML khỏi phần trình bày.

Trong các dự án React hoặc Next.js, CSS còn có thể được tổ chức thông qua CSS Modules, stylesheets toàn cục hoặc các giải pháp styling khác. Tuy nhiên, các nguyên tắc CSS nền tảng vẫn rất quan trọng.

4. CSS Selectors – Bộ chọn trong CSS

Selector giúp xác định phần tử nào sẽ nhận các quy tắc CSS.

4.1. Element Selector

Chọn tất cả phần tử thuộc một loại thẻ.

p {
    color: gray;
}

Quy tắc này áp dụng cho các phần tử p phù hợp trong phạm vi stylesheet.

4.2. Class Selector

Chọn các phần tử có một class nhất định.

<p class="description">First paragraph</p>
<p class="description">Second paragraph</p>

.description {
    color: gray;
}

Class bắt đầu bằng dấu chấm . trong CSS.

Một class có thể được sử dụng trên nhiều phần tử, và một phần tử cũng có thể chứa nhiều class.

<button class="button button-primary">Submit</button>

4.3. ID Selector

Chọn phần tử có id tương ứng.

<h1 id="main-title">Welcome</h1>

#main-title {
    color: navy;
}

ID bắt đầu bằng dấu #.

Trong HTML, một id nên duy nhất trong cùng một tài liệu. Trong thực tế, class thường thuận tiện hơn khi xây dựng các kiểu giao diện có thể tái sử dụng.

4.4. Descendant Selector

Chọn phần tử nằm bên trong một phần tử khác.

<div class="card">
    <h2>Product</h2>
    <p>Description</p>
</div>

.card p {
    color: gray;
}

Selector .card p chọn các phần tử p nằm bên trong phần tử có class card, kể cả khi chúng không phải phần tử con trực tiếp.

4.5. Grouping Selector

Dùng chung một quy tắc cho nhiều selector.

h1,
h2,
h3 {
    font-family: Arial, sans-serif;
}

Cách này giúp tránh lặp lại những khai báo giống nhau.

5. Cascade – Vì sao CSS có thể ghi đè lẫn nhau?

Một vấn đề người mới học CSS thường gặp là viết nhiều quy tắc cho cùng một phần tử nhưng kết quả hiển thị không giống mong đợi.

Ví dụ:

<p class="text" id="intro">Hello World</p>

p {
    color: black;
}

.text {
    color: blue;
}

#intro {
    color: red;
}

Mặc dù cả ba quy tắc đều đặt color, văn bản sẽ có màu đỏ vì selector ID có độ ưu tiên cao hơn selector class và selector phần tử trong trường hợp này.

Để hiểu hiện tượng đó, chúng ta cần tìm hiểu Cascade.

Cascade là cơ chế CSS sử dụng để xác định quy tắc nào được áp dụng khi có nhiều khai báo cùng tác động lên một thuộc tính.

Các yếu tố liên quan gồm:

• Origin và mức độ quan trọng của khai báo.
• Cascade layers, nếu được sử dụng.
• Specificity của selector.
• Thứ tự xuất hiện khi các yếu tố ưu tiên trước đó tương đương.

Vì vậy, không nên hiểu đơn giản rằng quy tắc viết sau luôn thắng. Quy tắc viết sau chỉ quyết định kết quả khi những yếu tố ưu tiên liên quan khác không tạo ra sự khác biệt.

6. Specificity – Độ ưu tiên của Selector

Specificity là một trong những yếu tố quan trọng giúp Cascade lựa chọn quy tắc CSS.

Trong những trường hợp thông thường, có thể ghi nhớ mức độ ưu tiên tương đối như sau:

Selector	Ví dụ	Độ ưu tiên tương đối
Element	p	Thấp
Class	.text	Cao hơn element
ID	#intro	Cao hơn class
Inline style	style="color: red"	Thường cao hơn các selector thông thường

Đây là cách ghi nhớ cơ bản, không phải bảng xếp hạng tuyệt đối cho mọi trường hợp. Origin, !important, cascade layers và các yếu tố khác có thể ảnh hưởng đến kết quả.

Ví dụ:

p {
    color: black;
}

.description {
    color: blue;
}

#content {
    color: green;
}

<p class="description" id="content">
    CSS Fundamentals
</p>

Kết quả là văn bản có màu xanh lá vì selector #content có specificity cao hơn hai selector còn lại trong trường hợp này.

Có nên sử dụng !important?

Ví dụ:

p {
    color: red !important;
}

!important làm tăng mức ưu tiên của khai báo trong Cascade, nhưng không phải là cách giải quyết phù hợp cho mọi xung đột CSS.

Lạm dụng nó có thể khiến stylesheet khó bảo trì vì các quy tắc khác khó ghi đè hơn.

Khi CSS không hoạt động như mong muốn, hãy kiểm tra selector, specificity và nguồn gốc của khai báo trước khi sử dụng !important.

7. Inheritance – Kế thừa trong CSS

Inheritance là cơ chế một số thuộc tính CSS có thể được truyền từ phần tử cha xuống phần tử con.

Ví dụ:

<div class="container">
    <h1>Hello World</h1>
    <p>Welcome to my website.</p>
</div>

.container {
    color: blue;
    font-family: Arial, sans-serif;
}

Trong trường hợp này, h1 và p thường kế thừa màu chữ và font chữ từ phần tử cha nếu không có quy tắc khác ghi đè.

Tuy nhiên, không phải tất cả thuộc tính CSS đều được kế thừa.

Ví dụ:

.container {
    border: 1px solid black;
}

Đường viền của .container không tự động được áp dụng cho từng phần tử con.

Một số thuộc tính thường được kế thừa:

• color
• font-family
• font-size
• line-height

Một số thuộc tính thường không được kế thừa tự động:

• margin
• padding
• border
• width
• height

Hiểu Inheritance giúp bạn tránh viết những khai báo dư thừa và dễ xác định nguyên nhân khi kiểu chữ hoặc màu sắc của phần tử thay đổi.

8. Box Model – Mỗi phần tử được tính kích thước như thế nào?

Một trong những kiến thức quan trọng nhất khi học CSS là Box Model.

Theo mô hình này, mỗi phần tử được mô tả thông qua các vùng:

1. Content – nội dung.
2. Padding – khoảng cách giữa nội dung và đường viền.
3. Border – đường viền.
4. Margin – khoảng cách bên ngoài đường viền.

Ví dụ:

.card {
    width: 300px;
    padding: 20px;
    border: 2px solid black;
    margin: 16px;
}

Với box-sizing: content-box, chiều rộng tổng thể của hộp theo chiều ngang, chưa tính margin, là:

Content: 300px
Padding: 20px × 2 = 40px
Border:   2px × 2 = 4px
------------------------
Tổng:                 344px

Vì vậy, width: 300px không đồng nghĩa với việc toàn bộ hộp chỉ rộng 300px trong mô hình mặc định.

Để việc tính kích thước dễ dự đoán hơn, nhiều dự án sử dụng:

*,
*::before,
*::after {
    box-sizing: border-box;
}

Với border-box, kích thước width và height bao gồm content, padding và border. Margin vẫn nằm bên ngoài kích thước đó.

Đây là một thiết lập phổ biến giúp xây dựng layout dễ kiểm soát hơn.

9. Một số thuộc tính CSS thường gặp

Khi bắt đầu làm giao diện, bạn sẽ thường xuyên sử dụng các thuộc tính sau:

Nhóm	Thuộc tính	Công dụng
Màu sắc	color, background-color	Màu chữ và nền
Văn bản	font-size, font-weight, line-height	Kiểm soát kiểu chữ
Kích thước	width, height, max-width	Kiểm soát kích thước
Khoảng cách	margin, padding	Tạo khoảng cách
Viền	border, border-radius	Đường viền và góc bo
Hiển thị	display	Xác định cách phần tử tham gia layout
Vị trí	position, top, left	Điều khiển vị trí trong các trường hợp phù hợp
Tràn nội dung	overflow	Kiểm soát nội dung vượt khỏi vùng chứa

Ví dụ:

.card {
    max-width: 400px;
    padding: 24px;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 12px;
    background-color: white;
}

Đoạn CSS này tạo một vùng nội dung có chiều rộng tối đa 400px, khoảng cách bên trong 24px, căn giữa theo chiều ngang khi còn đủ không gian, có đường viền và góc bo tròn.

10. CSS Reset và chuẩn hóa giao diện

Các Browser có thể áp dụng một số kiểu mặc định khác nhau cho phần tử HTML, chẳng hạn như margin của body hoặc kiểu tiêu đề.

Điều này có thể khiến giao diện không đồng nhất nếu Developer không chủ động thiết lập các quy tắc nền tảng.

Một cách phổ biến là tạo một số quy tắc cơ bản:

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

Đây là ví dụ về các quy tắc thiết lập nền tảng, không phải một CSS Reset hoàn chỉnh cho mọi dự án.

Một số dự án sử dụng thư viện hoặc stylesheet reset riêng. Khi dùng framework như Tailwind CSS, nhiều quy tắc chuẩn hóa đã được tích hợp sẵn.

11. Những lưu ý khi làm việc với CSS

Khi xây dựng giao diện, hãy hình thành những thói quen tốt:

• Ưu tiên class cho các kiểu giao diện có thể tái sử dụng.
• Hạn chế lạm dụng ID selector để định kiểu.
• Tránh sử dụng !important nếu chưa thực sự cần thiết.
• Hiểu Box Model trước khi xử lý những vấn đề về kích thước.
• Tách CSS thành các nhóm rõ ràng để dễ bảo trì.
• Dùng DevTools để kiểm tra quy tắc CSS đang được áp dụng.
• Không cố định quá nhiều kích thước nếu giao diện cần thích ứng với nhiều thiết bị.
• Kết hợp HTML có ngữ nghĩa với CSS để phân biệt cấu trúc và cách trình bày.

Kết luận

CSS là công nghệ giúp chuyển cấu trúc HTML thành giao diện có kiểu dáng và bố cục phù hợp.

Trong bài này, chúng ta đã tìm hiểu:

• CSS là gì và cách Browser áp dụng CSS.
• Ba cách sử dụng CSS trong HTML.
• Các loại Selector thường gặp.
• Cascade và Specificity.
• Inheritance.
• Box Model.
• Những thuộc tính CSS nền tảng và cách chuẩn hóa giao diện.

Đây là những kiến thức cơ bản cần nắm vững trước khi chuyển sang các kỹ thuật bố cục phức tạp hơn.

Ở bài tiếp theo, chúng ta sẽ tìm hiểu Flexbox & Grid – cách sắp xếp các phần tử, căn chỉnh nội dung và xây dựng layout Website một cách hiệu quả.

 

 

 

Bài 5. Flexbox & Grid – Xây dựng bố cục

 

Flexbox & Grid – Xây dựng bố cục Website bằng CSS

1. Flexbox và Grid là gì?

Sau khi tìm hiểu HTML để xây dựng cấu trúc và CSS để định dạng giao diện, bước tiếp theo là học cách sắp xếp các thành phần trên trang web.

Trong CSS, Flexbox và CSS Grid là hai hệ thống bố cục giúp chúng ta kiểm soát vị trí, kích thước và khoảng cách giữa các phần tử.

Ví dụ, khi xây dựng một website bán hàng, chúng ta cần sắp xếp logo và menu trên thanh điều hướng, đồng thời bố trí nhiều sản phẩm thành các hàng và cột. Flexbox và Grid giúp giải quyết những bài toán này mà không cần phụ thuộc vào các kỹ thuật cũ như float hoặc định vị tuyệt đối cho toàn bộ bố cục.

Điểm khác biệt cơ bản:

• Flexbox: phù hợp với bố cục theo một chiều, tức là sắp xếp phần tử theo hàng hoặc cột.
• Grid: phù hợp với bố cục theo hai chiều, tức là kiểm soát đồng thời hàng và cột.

Đây là cách phân biệt phổ biến để lựa chọn công cụ phù hợp, chứ không phải quy tắc cứng nhắc rằng mỗi công cụ chỉ được dùng cho một loại bố cục.

2. Flexbox – Bố cục theo một chiều

2.1. Cách hoạt động của Flexbox

Để sử dụng Flexbox, chúng ta đặt display: flex cho phần tử cha. Phần tử cha trở thành Flex Container, còn các phần tử con trực tiếp trở thành Flex Items.

Ví dụ:

<nav class="navbar">
  <div class="logo">My Website</div>
  <div class="menu">Trang chủ</div>
  <div class="menu">Sản phẩm</div>
  <div class="menu">Liên hệ</div>
</nav>

.navbar {
  display: flex;
  gap: 20px;
}

Các phần tử con sẽ được sắp xếp trên cùng một hàng theo mặc định, thay vì xếp thành các khối theo chiều dọc như khi sử dụng normal flow thông thường.

2.2. Các thuộc tính quan trọng của Flexbox

flex-direction – Xác định hướng sắp xếp

.container {
  display: flex;
  flex-direction: row;
}

Các giá trị thường dùng:

• row: sắp xếp theo hàng.
• column: sắp xếp theo cột.
• row-reverse: sắp xếp theo hàng theo chiều ngược lại.
• column-reverse: sắp xếp theo cột theo chiều ngược lại.

justify-content – Phân bố phần tử trên trục chính

.container {
  display: flex;
  justify-content: space-between;
}

Một số giá trị phổ biến:

• flex-start: dồn về đầu trục chính.
• center: căn giữa theo trục chính.
• flex-end: dồn về cuối trục chính.
• space-between: phân bố khoảng trống giữa các phần tử.
• space-around: tạo khoảng trống xung quanh từng phần tử.
• space-evenly: phân bố khoảng trống đồng đều giữa các phần tử và hai mép.

align-items – Căn chỉnh phần tử trên trục phụ

.container {
  display: flex;
  align-items: center;
}

Các giá trị thường gặp là stretch, flex-start, center và flex-end.

Cần lưu ý rằng trục chính và trục phụ phụ thuộc vào flex-direction. Với row, trục chính thường nằm ngang; với column, trục chính nằm dọc. Vì vậy, không nên ghi nhớ máy móc rằng justify-content luôn căn ngang và align-items luôn căn dọc.

gap – Tạo khoảng cách giữa các phần tử

.container {
  display: flex;
  gap: 16px;
}

gap giúp kiểm soát khoảng cách giữa các phần tử mà không cần đặt margin riêng cho từng phần tử con.

flex-wrap – Cho phép phần tử xuống dòng

.container {
  display: flex;
  flex-wrap: wrap;
}

Mặc định, Flexbox thường cố gắng giữ các phần tử trên cùng một dòng. Khi bật flex-wrap: wrap, các phần tử có thể chuyển xuống dòng tiếp theo khi không đủ không gian.

2.3. Ví dụ thực tế: Căn giữa nội dung

Flexbox thường được sử dụng để căn giữa nội dung trong một khu vực, chẳng hạn như màn hình chào mừng hoặc hộp thông báo.

<div class="hero">
  <h1>Chào mừng bạn!</h1>
</div>

.hero {
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Trong ví dụ này, justify-content: center căn giữa theo trục chính, còn align-items: center căn giữa theo trục phụ. Vì flex-direction mặc định là row, nội dung được căn giữa cả chiều ngang lẫn chiều dọc.

3. CSS Grid – Bố cục theo hai chiều

3.1. Cách hoạt động của Grid

CSS Grid cho phép xây dựng bố cục dựa trên các hàng và cột. Tương tự Flexbox, chúng ta bắt đầu bằng cách khai báo display: grid cho phần tử cha.

<div class="product-list">
  <div class="product">Sản phẩm 1</div>
  <div class="product">Sản phẩm 2</div>
  <div class="product">Sản phẩm 3</div>
  <div class="product">Sản phẩm 4</div>
</div>

.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

Kết quả là các sản phẩm được sắp xếp thành hai cột. Khi có nhiều phần tử hơn, Grid tự tạo thêm hàng theo bố cục đã khai báo.

3.2. Các thuộc tính quan trọng của Grid

grid-template-columns – Xác định cấu trúc cột

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

Ví dụ này tạo hai cột: cột đầu tiên rộng 200px và cột thứ hai chiếm phần không gian còn lại.

Đơn vị fr đại diện cho một phần không gian còn lại được phân chia trong Grid.

Có thể tạo ba cột bằng cách viết:

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

Hoặc viết ngắn gọn hơn:

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

grid-template-rows – Xác định kích thước hàng

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

Thuộc tính này xác định kích thước của các hàng được khai báo. Những hàng phát sinh ngoài cấu trúc tường minh có thể được điều khiển bằng các thuộc tính như grid-auto-rows.

gap – Khoảng cách giữa các ô

.container {
  display: grid;
  gap: 24px;
}

Có thể dùng row-gap để điều chỉnh khoảng cách giữa các hàng và column-gap để điều chỉnh khoảng cách giữa các cột.

grid-column và grid-row – Điều khiển vị trí phần tử

Một phần tử có thể chiếm nhiều cột hoặc nhiều hàng:

.featured-product {
  grid-column: span 2;
}

Trong ví dụ này, phần tử có thể chiếm hai cột trong lưới nếu cấu trúc hiện tại cho phép.

3.3. Ví dụ thực tế: Danh sách sản phẩm tự điều chỉnh

Grid có thể kết hợp với repeat(), auto-fit và minmax() để tạo bố cục linh hoạt:

.product-list {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(220px, 1fr)
  );
  gap: 20px;
}

Ý nghĩa:

• repeat(): lặp lại cấu hình cột.
• auto-fit: tự điều chỉnh số cột phù hợp với không gian có sẵn.
• minmax(220px, 1fr): đặt chiều rộng tối thiểu mỗi cột là 220px, đồng thời cho phép cột mở rộng để tận dụng không gian.

Nhờ đó, danh sách sản phẩm có thể tự thay đổi số cột khi chiều rộng container thay đổi mà không cần viết Media Queries cho từng kích thước màn hình.

Tuy nhiên, chiều rộng thực tế của container, khoảng cách giữa các cột và không gian khả dụng vẫn ảnh hưởng đến số cột được hiển thị.

4. So sánh Flexbox và Grid

Tiêu chí	Flexbox	CSS Grid
Bố cục chính	Một chiều	Hai chiều
Kiểm soát	Hướng sắp xếp và phân bố phần tử	Hàng, cột và vị trí trong lưới
Trường hợp thường dùng	Navbar, nhóm nút, căn chỉnh nội dung	Danh sách sản phẩm, gallery, bố cục trang
Cách sắp xếp	Linh hoạt theo không gian trên trục chính	Dựa trên cấu trúc hàng và cột
Responsive	Kết hợp flex-wrap, Media Queries	Kết hợp auto-fit, minmax(), Media Queries

Trong thực tế, không phải cứ bố cục có nhiều cột là bắt buộc dùng Grid, hoặc cứ sắp xếp theo hàng là bắt buộc dùng Flexbox. Hãy chọn công cụ dựa trên cách bạn muốn kiểm soát bố cục và hành vi của các phần tử.

5. Kết hợp Flexbox và Grid trong dự án thực tế

Một website thường sử dụng cả hai công cụ.

Ví dụ, với website bán hàng:

• Header: sử dụng Flexbox để căn chỉnh logo, menu và các nút chức năng.
• Danh sách sản phẩm: sử dụng Grid để tạo các cột sản phẩm.
• Thông tin bên trong thẻ sản phẩm: sử dụng Flexbox để sắp xếp tên, giá và nút mua hàng.
• Khu vực nội dung chính: sử dụng Grid để chia sidebar và phần nội dung nếu cần kiểm soát đồng thời hàng và cột.

Cách tiếp cận này giúp bố cục dễ đọc, dễ điều chỉnh và thuận tiện khi mở rộng giao diện cho nhiều kích thước màn hình.

6. Những lỗi thường gặp khi sử dụng Flexbox và Grid

Nhầm lẫn giữa justify-content và align-items

Hãy xác định flex-direction trước, sau đó mới xác định trục chính và trục phụ để chọn thuộc tính căn chỉnh phù hợp.

Sử dụng kích thước cố định không hợp lý

Các phần tử có chiều rộng quá lớn có thể làm tràn container. Hãy cân nhắc sử dụng max-width, minmax() và các kích thước linh hoạt.

Quên sử dụng gap

Thay vì thêm margin cho từng phần tử, hãy cân nhắc dùng gap để quản lý khoảng cách trong Flexbox và Grid.

Cho rằng Grid tự động giải quyết mọi vấn đề responsive

Grid có thể giúp tạo bố cục linh hoạt, nhưng bạn vẫn cần kiểm tra kích thước tối thiểu của phần tử, chiều rộng container và cách nội dung xuống dòng.

Lạm dụng position: absolute để sắp xếp bố cục

Định vị tuyệt đối hữu ích cho các thành phần chồng lên nhau, chẳng hạn như biểu tượng trên hình ảnh. Tuy nhiên, nó không nên là giải pháp mặc định để sắp xếp toàn bộ trang web.

7. Bài tập thực hành

Hãy xây dựng một khu vực hiển thị sáu thẻ sản phẩm với các yêu cầu:

• Sử dụng CSS Grid để sắp xếp sản phẩm thành ba cột trên màn hình rộng.
• Tạo khoảng cách giữa các thẻ bằng gap.
• Sử dụng Flexbox bên trong từng thẻ để sắp xếp tên sản phẩm, giá và nút mua hàng.
• Đảm bảo hình ảnh không vượt khỏi thẻ sản phẩm.
• Thử thay đổi chiều rộng trình duyệt và quan sát cách bố cục thay đổi.

Sau khi hoàn thành, hãy kiểm tra giao diện bằng DevTools để hiểu rõ hơn cách Flexbox và Grid hoạt động.

Kết luận

Flexbox và CSS Grid là hai kỹ năng nền tảng trong quá trình xây dựng giao diện bằng CSS. Flexbox phù hợp khi cần sắp xếp và căn chỉnh phần tử theo một chiều, trong khi Grid giúp kiểm soát bố cục theo hàng và cột.

Khi hiểu cách hoạt động của hai công cụ này, bạn sẽ dễ dàng xây dựng giao diện rõ ràng, linh hoạt và thuận tiện để phát triển tiếp.

Ở bài tiếp theo, chúng ta sẽ tìm hiểu Responsive Web Design – cách kết hợp CSS, Flexbox, Grid và Media Queries để xây dựng website phù hợp với nhiều kích thước màn hình.