Code CSS tham khảo về Grid Layout

Bài đăng dưới đây mình đưa ra một số ý kiến khách quan theo cảm nhận của mình và những nguyên nhân bạn nên sử dụng thiết kế Grid Layout thay vì Flexbox

Nếu đã quen thuộc với Flexbox, bạn nên thử qua Grid vì những ưu điểm sau đây:

“CSS Grid là một phương pháp bố trí CSS được phát triển dưới dạng bố cục hai chiều của các mục trên trang web hoặc ứng dụng, có nghĩa là nó có thể quản lý cả cột và hàng.

CSS Grid vượt trội hơn trong việc chia một trang thành nhiều phần hoặc xác định mối tương quan về kích thước, vị trí và lớp.

Giống tables, CSS Grid cho phép chúng ta sắp xếp các thành phần theo cột và hàng. Tuy nhiên, nhiều bố cục có thể đạt được hoặc dễ dàng hơn với CSS Grid so với bảng. Ví dụ, một phần tử nằm trong container của CSS Grid có thể tự đặt chúng sao cho chúng thực sự chồng chéo và lớp, giống như thuộc tính position trong CSS.”

Trích dẫn nguồn viblo.asia

Ưu điểm vượt trội của Grib là các phần tử element được sắp xếp đều nhau theo cả chiều ngang (hàng) và dọc (cột), lấy ví dụ widget Blog có 9 bài đăng hiển thị đều nhau. Ngoài ra bạn chỉ viết css mà không cần quan tâm đến reponsive min-width và max-width

Khi nào thì sử dụng Grid thay vì Flexbox

Giả sử trong lớp học có 12 cái bàn nếu bạn muốn sắp xếp mỗi hàng 3 cái bàn => bạn có được 4 hàng & 3 cột (giáo viên trên bảng nói có 3 dãy bàn) => bạn nên áp dụng Grid trong trường hợp này. Nhưng bạn lại muốn sắp xếp số bàn của mỗi hàng khác nhau ví dụ hàng 1: 2 bàn, hàng 2: 3 bàn, hàng 3: 3 bàn, và hàng 4: 4 bàn => Không xác định được số cột mà chỉ biết được hàng là 4 => Lúc này bạn sử dụng Flexbox.

Chia element cũng vậy cụ thể mỗi element áp dụng cho một post, nếu bạn muốn chúng sắp xếp đều nhau theo cả chiều ngang và chiều dọc (hàng & cột thẳng tắp).

Cách áp dụng CSS Grid

Code XML của mỗi post

<a expr:href='data:post.url.canonical' expr:title='data:post.title'>

  <figure>

    <img expr:alt='data:post.title' expr:src='data:post.featuredImage'/>

    <figcaption>

      <h2><data:post.title/></h2>

      <p><data:post.snippets.short/></p>

      <span>

        <data:post.author.name/>

        <time expr:datetime='data:post.date.iso8601'>

           <data:post.date/>

        </time>

      </span>

    </figcaption>

  </figure>

 </a>

Trích xuất HTML của post

<a href="url bài viết" title="Tiêu đề bài viết">

  <figure>

    <img alt="Tiêu đề bài viế" src="url ảnh">

    <figcaption>

      <h2>Tiêu đề bài viết</h2>

      <p>Tóm tắt bài viết...</p>

      <span>

        Tên tác giả

        <time datetime="ngày đăng định dạng iso">Ngày đăng</time>

      </span>

    </figcaption>

  </figure>

</a>

Khi thiết kế trong XML của chủ đề, bạn cần đặt vòng lặp của post trong một thẻ section, ví dụ

<section class='grid-layout'>  

  <b:loop values='data:posts' var='post'>

    <a expr:href='data:post.url.canonical' expr:title='data:post.title'>

      <figure>

        <img expr:alt='data:post.title' expr:src='data:post.featuredImage'/>

        <figcaption>

          <h2><data:post.title/></h2>

          <p><data:post.snippets.short/></p>

          <span>

            <data:post.author.name/>

            <time expr:datetime='data:post.date.iso8601'>

              <data:post.date/>

            </time>

          </span>

        </figcaption>

      </figure>

    </a>

  </b:loop>

</section>

Code CSS của post theo Grid layout

.grid-layout {

    position: relative;

    display: -ms-grid;

    display: grid;

    grid-template-columns: repeat(auto-fill,minmax(220px,1fr));

    grid-gap: 20px;

    justify-items: center;

}

.grid-layout>a,.grid-layout>a:hover {

    color: inherit;

}

.grid-layout>figure {

    display: flex;

    flex-direction: column;

    height: 100%;

    border-radius: 6px;

    background-color: #fff;

    box-shadow: 0 1px 1px rgba(47,70,162,.05), 0 4px 12px rgba(47,70,162,.075), 0 12px 24px rgba(47,70,162,.05);

    font-size: .89rem;

    color: #5f849f;

    transition: .2s;

}

.grid-layout>figure>img {

    max-height: 180px;

    min-height: 180px;

    width: 100%;

    object-fit: cover;

    border-top-left-radius: 6px;

    border-top-right-radius: 6px;

    max-width: 100%;

    height: auto;

    border: none;

    vertical-align: top;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

}

.grid-layout>figure>figcaption {

    position: relative;

    padding: 20px;

    height: 100%;

}

.grid-layout figcaption>h2 {

    font-size: 1.11rem;

    color: #264459;

    margin-top: -4px;

    margin-bottom: 16px;

}

.grid-layout figcaption>p {

    margin-bottom: 30px;

}

.grid-layout figcaption>span {

    position: absolute;

    bottom: 20px;

    display: flex;

    font-family: Roboto,Helvetica,Arial,sans-serif;

    text-transform: uppercase;

    letter-spacing: .075em;

    font-weight: 500;

    font-size: .62742241rem;

}

.grid-layout figcaption>span>time {

    display: -ms-grid;

    display: grid;

    grid-column-gap: 5px;

    align-items: center;

    grid-template-columns: auto 1fr;

}

Trong code css ở trên có 2 phần mình đánh dấu màu đỏ, 220px là chiêu rộng của mỗi post bạn có thể thay đổi > kích thước càng tăng số post của mỗi hàng sẽ giảm đi và ngược lại kích thước càng giảm số post của mỗi hàng tăng lên, 20px là khoảng cách của mỗi post