Chia lưới hiển thị hình ảnh dễ dàng với CSS Grid Layout

12/10/2021 2 55 2 phút đọc

Demo

Mô-đun bố cục lưới CSS cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và cột, giúp thiết kế các trang web dễ dàng hơn.

Chia lưới hiển thị hình ảnh dễ dàng với CSS Grid Layout

Mục lục

HTML
CSS
Demo

Mô-đun bố cục lưới CSS cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và cột, giúp thiết kế các trang web dễ dàng hơn.

HTML

Ví dụ một thẻ div và các img có kích thước khác nhau.

<div class="grid-img">
    <img src="https://inithtml.com/wp-content/uploads/2021/10/css-grid-layout-300x131.jpg" alt="" width="300" height="131" class="alignnone size-medium wp-image-1255" />
    <img src="https://inithtml.com/wp-content/uploads/2021/08/emoji-300x200.jpg" alt="" width="300" height="200" class="alignnone size-medium wp-image-1248" />
    <img src="https://inithtml.com/wp-content/uploads/2021/08/mail-300x150.jpg" alt="" width="300" height="150" class="alignnone size-medium wp-image-1245" />
    <img src="https://inithtml.com/wp-content/uploads/2021/07/letsencrypt-300x200.jpg" alt="" width="300" height="200" class="alignnone size-medium wp-image-1240" />
    <img src="https://inithtml.com/wp-content/uploads/2021/06/google-web-stories-300x125.jpg" alt="" width="300" height="125" class="alignnone size-medium wp-image-1231" />
    <img src="https://inithtml.com/wp-content/uploads/2020/12/watermark-300x171.jpg" alt="" width="300" height="171" class="alignnone size-medium wp-image-1197" />
    <img src="https://inithtml.com/wp-content/uploads/2020/11/ssh-300x169.jpg" alt="" width="300" height="169" class="alignnone size-medium wp-image-1158" />
    <img src="https://inithtml.com/wp-content/uploads/2021/02/cropper-300x196.jpg" alt="" width="300" height="196" class="alignnone size-medium wp-image-1206" />
    <img src="https://inithtml.com/wp-content/uploads/2020/12/selinux-300x169.jpg" alt="" width="300" height="169" class="alignnone size-medium wp-image-1161" />
    <img src="https://inithtml.com/wp-content/uploads/2020/12/sublime-3-2-300x153.jpg" alt="" width="300" height="153" class="alignnone size-medium wp-image-1163" />
</div>

CSS

CSS đơn giản như sau.

.grid-img {
    column-count: 3; /* Số cột */
    column-gap: 10px; /* Khoảng cách giữa các cột */
}

.grid-img img {
    display: grid;
    grid-template-rows: 1fr auto;
    margin-bottom: 15px;
    break-inside: avoid;
}