Sử dụng CSS Grid để xây dựng web layout

https://fit.hufi.edu.vn/hocthuat/su-dung-css-grid-de-xay-dung-web-layout

Sử dụng CSS Grid để xây dựng web layout

25/03/2021

CSS Grid layout là một hệ thống lưới hai chiều được thiết kế để giúp các nhà phát triển web chia các phần tử thành các cột và hàng nhằm tạo ra một bố cục nhất quán và liền mạch cho các ứng dụng web.

Logic đằng sau CSS Grid là, nếu một nhà phát triển lấy một phần tử như div và hiển thị một lưới trong đó, thì họ có thể chia phần tử đó thành các cột và hàng, nơi các mục có thể được đặt trong lưới . Với CSS Grid, ta có thể thực hiện tất cả điều này mà không cần phải sử dụng thêm các thuộc tính định vị (trên, phải, trái, dưới).

Trong bài viết này, chúng ta sẽ tập trung vào thiết kế cơ bản bằng cách sử dụng các hàng, cột và khu vực để tạo một ứng dụng web đơn giản bằng cách sử dụng CSS Grid.

CSS Grid: Thuật ngữ cơ bản

  • Grid container – hộp chứa lưới. Đây là khối xây dựng chính của CSS Grid.

  • Grid cell – các unit trên lưới

  • Grid area – một ô đơn lẻ hoặc nhiều ô có dạng hình vuông hoặc hình chữ nhật (nhưng không phải hình chữ L)

  • Grid track – tập hợp các hàng và cột, được xác định bằng cách sử dụng thuộc tính grid-template-columns và grid-template-rows

  • Grid gaps – giúp tạo khoảng cách lưới. Bạn không thể có nội dung trên hoặc trong khoảng cách lưới.

Bắt đầu với CSS Grid

Hiển thị vùng chứa lưới và các phần tử

Vùng chứa lưới là điểm bắt đầu để hiển thị lưới trên một phần tử. Để bắt đầu với lưới, trước tiên chúng ta phải hiển thị lưới trên vùng chứa bằng cú pháp dưới đây:

display: grid;

CSSCOPY

Trong CSS Grid, mối quan hệ giữa vùng chứa lưới và các mục (phần tử) của nó tương ứng là mối quan hệ của cha và con. Mỗi lưới đều có một vùng chứa chứa các mục và mọi phần tử được đặt trên lưới là một mục lưới.

Khi bạn tạo một vùng chứa thành lưới (display: grid;), tất cả các mục con trực tiếp của nó sẽ tự động trở thành các mục lưới.

Nhưng hiển thị các mục dưới dạng lưới không tự nó làm được gì nhiều. Đây là lúc các khái niệm khác như grid-template-columns và grid-template-rows phát huy tác dụng.

Sử dụng đơn vị fr và ký hiệu repeat ()

Mặc dù chúng ta luôn có thể sử dụng các đơn vị đo lường cố định như px trong việc xác định lưới, CSS Grid layout cũng giới thiệu một đơn vị đo lường mới được gọi là đơn vị fr.

Đơn vị fr đại diện cho một tỷ lệ của không gian có sẵn trong vùng chứa lưới và có thể được sử dụng để tạo các đường lưới linh hoạt.

Đây là một ví dụ:

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

CSSCOPY

Đoạn mã trên sẽ chia không gian có sẵn thành bốn phần: hai phần sẽ được chỉ định cho cột đầu tiên, trong khi hai phần còn lại sẽ được chỉ định mỗi cột theo khoảng trống còn lại. Điều này giúp đảm bảo tính nhất quán khi xây dựng lưới của bạn.

Ký hiệu repeat () cũng giúp đảm bảo tính nhất quán và có thể được sử dụng để lặp lại tất cả hoặc một phần của danh sách các phần tử như sau:

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

CSSCOPY

Demo: Xây dựng ứng dụng web với CSS Grid

HTML

Đầu tiên, ta tạo một mẫu HTML đơn giản và điền vào nó một số văn bản giả để giúp thiết lập một số cấu trúc:

<html>
<head>
  <meta charset=utf-8>
  <title>Demo CSS Grid </title>
  <link rel="stylesheet" href="/main.css">
</head>
<div class="container">     
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>  
  </nav>
  <main><h2>A Demo Site CSS Grid</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque pariatur possimus alias quod ratione incidunt dicta assumenda repudiandae optio eveniet, quisquam fuga! Nam eaque fuga similique quia, esse non libero?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo libero doloremque, eum quis laudantium hic iste ab sed ipsum veniam, quam dolor rem cupiditate corrupti aliquam repudiandae officia soluta impedit!</p>
  </main>
  <div class="sidebar img"><h2>Find Me on Social Media</h2>
    <p><a href="https://www.facebook.com/dntrongnghia/">Facebook</a></p>
  </div>
  <div class="about"><h2>About </h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt voluptatem reprehenderit non. Magni sit alias quia, vel quidem autem quos optio quam at porro aliquid necessitatibus aut et eos nulla.</p>
  </div>
  <div class="contact"><h2>Contact</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi consequuntur magnam ipsum, commodi quam, non dolorem numquam veritatis, qui nam voluptas asperiores neque magni. Placeat, natus reprehenderit. Fugit, voluptatum commodi.</p>
</div>
<footer>Copỷight 2021 <a href=" https://www.facebook.com/dntrongnghia/">Trong Nghia</a></footer>
</div>
</html>

MarkupCOPY

CSS

Tại đây, ta liên kết biểu định kiểu (CSS) với HTML và triển khai bố cục bằng CSS Grid.

body{
  background: #F1F0EE;
  margin: 0;
}

.container {
  display: grid;        
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr; 
  grid-template-areas:
    "nav nav nav nav"
    "main main main main"
    "about about about sidebar"
    "contact contact contact sidebar"
    "footer footer footer footer";
  gap: 0.5rem;
  height: 100vh;
  font-weight: 800;
  font-size: 12px;
  color: #004d40;
  text-align: center;
}

nav{
  background-color: #3770F6;
  grid-area: nav;
}

nav ul{
  list-style: none;
  font-size: 16px;
  font-weight: bolder;
  float: left;
}

li{
  display: inline-block;
}

li a{
  color: #ffffff;
}

a:hover{
  color: #FF7F50;
}

main {
  grid-area: main;
}

main h2 {
  font-weight: bolder;
}

main p{
text-align: left;
}

.sidebar {
  background: #D3D4D7;
  grid-area: sidebar;
}

.about {
  background: #D7D6D3;
  grid-area: about;
}

.contact {
  background: #BDBCBB;
  grid-area: contact;
}

footer {
  background: #3770F6;
  grid-area: footer;

CSSCOPY

Kết quả

CSS Grid: Những điều quan trọng

Có nhiều cách để đạt được các mục tiêu tương tự trong CSS. Sử dụng CSS Grid chỉ là một cách để đặt các phần tử vào các hàng và cột để thiết kế các ứng dụng web nhất quán, liền mạch với giao diện thân thiện với người dùng.

PreviousCSS Grid: Holy Grail LayoutNextLuyện tập CSS Grid qua bài tập tạo layout Airbnb, youtube, Pinterest

Last updated