Bài 4. Bố cục với Flexbox và Grid

Bố cục trong Tailwind chính là Flexbox và Grid của CSS (loạt CSS bài 13, 14) viết bằng lớp. Bài này dựng thanh điều hướng, hàng thẻ, lưới sản phẩm, bố cục trang và căn giữa với các lớp flex-*, grid-*, gap-*, col-span-*.

50 phútCơ bản
Bạn sẽ học được
  • Dùng flex, items-*, justify-*, flex-1, shrink-0
  • Dùng grid, grid-cols-*, col-span-*, place-items-center
  • Dựng container và bố cục trang
  • Dùng position, inset, z-index

Một số khái niệm

CSSTailwind
display: flexflex
justify-content: space-betweenjustify-between
align-items: centeritems-center
flex: 1 1 0%flex-1
flex-direction: columnflex-col
gap: 1remgap-4
display: grid; grid-template-columns: repeat(3, 1fr)grid grid-cols-3
grid-column: span 2col-span-2
place-items: centerplace-items-center
position: absolute; inset: 0absolute inset-0

Thanh điều hướng và hàng thẻ

<nav class="flex items-center gap-6 rounded-xl bg-slate-900 px-5 py-3 text-sm text-slate-200">
  <span class="font-bold text-white">Tự Học Tin</span><a class="hover:text-white" href="#">Khóa học</a><a class="hover:text-white" href="#">Blog</a>
  <a href="#" class="ml-auto rounded-lg bg-green-500 px-3 py-1.5 font-medium text-white hover:bg-green-400">Đăng nhập</a>
</nav>
<div class="mt-4 flex flex-wrap gap-3">
  <div class="flex flex-1 basis-40 flex-col rounded-xl bg-white p-4 shadow"><b>HTML</b><p class="text-sm text-slate-500">Ngắn</p><a class="mt-auto pt-3 text-sm font-semibold text-green-700" href="#">Học →</a></div>
  <div class="flex flex-1 basis-40 flex-col rounded-xl bg-white p-4 shadow"><b>CSS</b><p class="text-sm text-slate-500">Mô tả dài hơn để thấy liên kết vẫn nằm đáy thẻ nhờ mt-auto</p><a class="mt-auto pt-3 text-sm font-semibold text-green-700" href="#">Học →</a></div>
  <div class="flex flex-1 basis-40 flex-col rounded-xl bg-white p-4 shadow"><b>JS</b><p class="text-sm text-slate-500">Ngắn</p><a class="mt-auto pt-3 text-sm font-semibold text-green-700" href="#">Học →</a></div>
</div>
Kết quả hiển thị

Grid và bố cục trang

<div class="grid grid-cols-4 gap-2 text-center text-sm text-white">
  <div class="col-span-2 row-span-2 grid place-items-center rounded-lg bg-indigo-500 p-4">col-span-2 row-span-2</div>
  <div class="rounded-lg bg-indigo-400 p-4">3</div><div class="rounded-lg bg-indigo-400 p-4">4</div><div class="rounded-lg bg-indigo-400 p-4">5</div><div class="rounded-lg bg-indigo-400 p-4">6</div>
  <div class="col-span-full rounded-lg bg-indigo-700 p-2">col-span-full</div>
</div>
<div class="mt-4 grid min-h-40 grid-cols-[140px_1fr] grid-rows-[auto_1fr_auto] gap-2 text-sm text-white">
  <header class="col-span-2 rounded bg-emerald-800 p-2">header</header><aside class="rounded bg-emerald-600 p-2">aside</aside><main class="rounded bg-emerald-200 p-2 text-emerald-900">main</main><footer class="col-span-2 rounded bg-emerald-700 p-2">footer</footer>
</div>
Kết quả hiển thị

Vị trí, lớp phủ, căn giữa

<div class="relative h-40 overflow-hidden rounded-2xl bg-[url(https://picsum.photos/seed/sapa/700/300)] bg-cover bg-center">
  <span class="absolute left-3 top-3 rounded-full bg-rose-500 px-2 py-0.5 text-xs text-white">Nổi bật</span>
  <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-3 text-white">Sa Pa mùa lúa chín</div>
</div>
<div class="mt-3 grid h-24 place-items-center rounded-xl border-2 border-dashed border-slate-300"><span class="rounded bg-slate-800 px-3 py-1 text-white">Căn giữa bằng grid place-items-center</span></div>
Kết quả hiển thị
Mẹo hay

Lớp container mx-auto px-4 tạo khung nội dung căn giữa theo breakpoint; hoặc dùng mx-auto max-w-6xl px-4 để chủ động chiều rộng.

Lưu ý

Trong v4, lớp gradient mới là bg-linear-to-t (v3 là bg-gradient-to-t, vẫn được hỗ trợ). Khi đọc hướng dẫn trên mạng, chú ý phiên bản.

Thực hành
  1. Dựng navbar: logo trái, menu giữa, nút phải.
  2. Lưới 8 thẻ khóa học 4 cột, thẻ đầu chiếm 2 cột.
  3. Dựng bố cục blog có sidebar bằng grid-cols-[...].
  4. Ảnh bìa có nhãn góc và chữ đè trên lớp gradient.
Tóm tắt bài học
  • flex, items-*, justify-*, flex-1, mt-auto.
  • grid, grid-cols-*, col-span-*, place-items-center.
  • relative/absolute, inset-*, z-*.
  • Giá trị tùy ý grid-cols-[200px_1fr] cho bố cục đặc biệt.