Init HTML

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;
}

Demo

Chúc các bạn thành công!