Với các bạn đang học HTML CSS thì khi nhắc đến Layout chắc chắn trong đầu các bạn sẽ hiện lên cái tên Bootstrap, tôi cũng từng sử dụng Bootstrap rất nhiều đến mức quá phụ thuộc vào nó mà quên đi cách viết CSS, đến mức mà mọi component nhỏ nhất tôi cũng phải nhét Bootstrap vào mới có thể căn chuẩn chỉnh các Element bên trong.
Thành thật mà nói, Dev mà viết cái CSS cũng không nên hồn thì làm ăn gì nữa phỏng? Sau đó tôi bắt đầu gõ CSS chay nhiều hơn và cũng học được thêm nhiều điều, ví dụ đơn giản nhất đó là sử dụng Flexbox và Grid để chia và căn chỉnh layout thay vì chỉ sử dụng các component đã được framework làm sẵn cho.
Ví dụ 1: Đặt Footer ở cuối trang
Trước đây khi làm phần này tôi sẽ gặp phải vấn đề đó là footer không nằm chính xác ở vị trí cuối trang mà nó sẽ bị phụ thuộc vào tổng độ cao của trang web, nếu trang web có chiều cao vượt qua chiều cao gốc của màn hình thì không nói làm gì, nhưng nếu chiều cao của trang web quá ngắn thì phần footer này rất dễ bị trôi lửng lơ ở giữa.
Để giải quyết vấn đề này tôi có 2 cách: Flexbox và Grid
Xử lý với Flexbox
Đầu tiên hãy ngó qua file HTML đã
1 2 3 4 5 6 7 8 9 10 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> |
Cấu trúc này gồm 3 phần: Header, Main, Footer, tôi đã thêm một chút CSS để có thể nhìn rõ hơn 3 phần này. Bây giờ công việc của tôi đó là làm sao để Footer luôn nằm ở vị trí cuối trang mà không cần quan tâm đến chiều cao của trang web.
Đầu tiên chúng ta cần đảm bảo chiều cao tối thiểu của trang web sẽ luôn phải phủ kín màn hình, các bạn có thể làm điều này bằng cách đặt thuộc tính min-height: 100vh cho body, đặt tiếp thuộc tính display: flex và flex-direction: column cho thẻ này để đảm bảo các element tiếp theo sẽ được căn chỉnh theo dạng cột.
Giờ đến phần Footer rất đơn giản, bạn chỉ cần đặt thuộc tính margin-top: auto là Footer sẽ tự động được giãn cách về cuối trang mà không cần quan tâm đến các thành phần được thêm vào sau này, nói đơn giản là không cần quan tâm đến chiều cao vì margin sẽ tự động được điều chỉnh theo
1 2 3 4 5 6 7 8 9 10 | <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">footer</span> <span class="token punctuation">{</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Tôi đã vẽ thêm các nét đứt bao quanh thẻ main để có thể nhìn rõ ràng hơn, như các bạn có thể thấy phần trắng thừa ngay bên dưới thẻ main đã có một phần trắng được để thừa ra, đó là vì Footer lúc này đã được đẩy xuống cuối trang mà không cần quan tâm đến chiều cao của các element khác.
Xử lý với Grid
Với Grid chúng ta có cách xử lý khác một chút, đầu tiên hãy xem qua CSS:
1 2 3 4 5 6 | <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> auto 1fr auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Với Grid chúng ta đã bỏ bớt đi việc đặt margin cho Footer mà vẫn có được hiệu quả tương đương. Giờ hãy đi vào phân tích một chút:
- Chúng ta có một thuộc tính trông khá lạ:
grid-template-rows: auto 1fr auto, thuộc tính này sẽ cho phép chia toàn bộ các element bên trong thành các hàng riêng biệt, như chúng ta thấyauto 1fr auto, 3 đơn vị này sẽ lần lượt tương ứng với 3 hàng đó là: Header, Main, Footer. - Với Header và Footer tôi đặt bằng
autotức là không quan tâm đến chiều cao của 2 element này, để chúng tự động điều chỉnh - Với Main tôi đặt bằng
1fr.frlà một kiểu đơn vị của Grid, viết tắt củafraction. Đơn vị này sẽ yêu cầu trình duyệt tự tính toán không gian còn trống để phân chia cho các hàng, trong trường hợp này Main của tôi sẽ tự động lấp đầy các khoảng trống nằm giữa Header và Footer, điều này khiến cho Footer được tự động đẩy về phía cuối trang web, và chúng ta có được kết quả giống như trên. Đây là khái niệm khá khó hiểu nên nếu có dịp bạn cứ thử tự nghịch vài dòng CSS để xem cụ thể khoảng trống đó được thay đổi như thế nào
Cái nào tốt hơn?
Tổng kết lại như các bạn thấy ở trên thì có vẻ việc sử dụng Grid sẽ chiếu ưu thế hơn một chút, do lượng code được sử dụng ít hơn mà vẫn có hiệu quả tương đương, tuy nhiên vấn đề sẽ xảy ra nếu bạn muốn add thêm element vào giữa Header và Footer thì bạn cũng cần thêm các vị trí mới vào grid-template-rows tương ứng, hoặc bạn cần bằng cách nào đó đảm bảo template chỉ có duy nhất 3 phần tử để không phải thay đổi grid-template.
Mặt khác, flexbox lại phù hợp với mọi template với nhiều element tuy số lượng code có nhiều hơn một chút hoặc nếu bạn có muốn thay đổi article thay thế cho main chẳng hạn. Tóm lại là tùy vào mindset và yêu cầu của dự án hoặc thói quen sử dụng, bạn có rất nhiều cách để tùy biến những thứ sẵn có thành một trang web hoàn hảo riêng.