Classes cho layout (flex, grid, container)

Trong bài học này, học viên sẽ tìm hiểu cách sử dụng các class của Tailwind CSS cho layout, đặc biệt là flexbox và grid. Học viên sẽ thực hành xây dựng các bố cục 2 cột, 3 cột, và làm quen với container cho thiết kế responsive.

Classes cho layout (flex, grid, container)

1. Hướng dẫn sử dụng Flexbox

• Class cơ bản:
  • flex: Kích hoạt chế độ flexbox.
  • flex-row, flex-col: Sắp xếp phần tử theo hàng hoặc cột.
  • justify-start, justify-center, justify-end: Căn chỉnh phần tử theo trục ngang.
  • items-start, items-center, items-end: Căn chỉnh phần tử theo trục dọc.
• Ví dụ:

<div class="flex justify-center items-center h-32 bg-gray-200">
  <div class="bg-blue-500 text-white p-4">Item 1</div>
  <div class="bg-green-500 text-white p-4">Item 2</div>
</div>

2. Hướng dẫn sử dụng Grid

• Class cơ bản:
  • grid: Kích hoạt chế độ grid.
  • grid-cols-2, grid-cols-3: Chia cột cho layout.
  • gap-4: Khoảng cách giữa các phần tử.
• Ví dụ:

<div class="grid grid-cols-3 gap-4">
  <div class="bg-red-500 text-white p-4">Column 1</div>
  <div class="bg-yellow-500 text-white p-4">Column 2</div>
  <div class="bg-green-500 text-white p-4">Column 3</div>
</div>

3. Thực hành xây dựng layout 2 cột và 3 cột

• Layout 2 cột:

<div class="grid grid-cols-2 gap-6">
  <div class="bg-blue-300 p-4">Cột 1</div>
  <div class="bg-green-300 p-4">Cột 2</div>
</div>

• Layout 3 cột:

<div class="grid grid-cols-3 gap-6">
  <div class="bg-red-300 p-4">Cột 1</div>
  <div class="bg-yellow-300 p-4">Cột 2</div>
  <div class="bg-green-300 p-4">Cột 3</div>
</div>

4. Sử dụng Container cho Responsive Layout

• Class cơ bản:
  • container: Tự động căn giữa và giới hạn chiều rộng.
  • mx-auto: Căn giữa theo chiều ngang.
  • Kết hợp responsive như sm:, md:, lg:.
• Ví dụ:

<div class="container mx-auto p-4 bg-gray-100">
  <h1 class="text-xl font-bold">Responsive Container</h1>
  <p>Đây là nội dung bên trong container.</p>
</div>

Kết Luận

Qua bài học này, học viên đã nắm được cách sử dụng flexbox và grid để tạo bố cục linh hoạt, cũng như biết cách sử dụng container cho thiết kế responsive. Hãy thực hành xây dựng các bố cục phức tạp hơn để hiểu rõ sức mạnh của Tailwind CSS trong thiết kế giao diện.