Grid Layout trong CSS (Giới thiệu cơ bản)

Trong bài học này, chúng ta sẽ tìm hiểu về CSS Grid Layout - một công cụ mạnh mẽ trong việc thiết kế giao diện web.

1. Grid Layout là gì?

CSS Grid Layout là một hệ thống dòng - cột (“grid”), cho phép sắp xếp các phần tử trong trang web một cách dễ dàng.

2. Thuộc tính display: grid

• Để biến một container thành Grid, ta sử dụng thuộc tính display: grid.

.container {
  display: grid;
}

3. Thuộc tính grid-template-columns và grid-template-rows

• grid-template-columns: Xác định cấu trúc của các cột trong Grid.
• grid-template-rows: Xác định cấu trúc của các dòng trong Grid.

Ví dụ:

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

• Cấu trúc:
  • Có 3 cột:
    • Cột đầu 100px
    • Cột thứ hai 200px
    • Cột cuối auto (chiếm phần còn lại).
  • Có 3 dòng:
    • Dòng đầu 50px
    • Dòng thứ hai auto (tuùy theo nội dung)
    • Dòng cuối 100px.

4. Thực hành

Bài tập 1: Tạo layout 3x3

Tạo một container gồm 9 ô (3 dòng x 3 cột).

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
  }
  .container div {
    background: lightblue;
    text-align: center;
    padding: 20px;
    border: 1px solid black;
  }
</style>

Bài tập 2: Layout gallery ảnh

Tạo gallery ảnh với cấu trúc Grid.

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
</div>

<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .gallery img {
    width: 100%;
    height: auto;
    border: 2px solid black;
  }
</style>

Kết luận

• Grid Layout là một công cụ mạnh mẽ giúp thiết kế các layout phức tạp một cách dễ dàng.
• Hiểu được các thuộc tính như grid-template-columns và grid-template-rows sẽ giúp bạn tối ưu hóa layout.