Tech: CSS Grid – fr

Sebelum ini aku telah ceritakan bagaimana grid dalam css berfungsi, maka untuk kali ini aku sambung sedikit lagi sekitar perkara ini.

Di dalam CSS Grid, terdapat satu unit yang diperkenalkan, fr iaitu fraction.

Kegunaan fr dapat ditonjolkan dengan situasi seperti ini;

<!doctype html>
<html lang="en">
<head>
    <style>
        body {
            margin-top: 40px;
        }

        #container {
            width: 800px;
            margin: auto;
            background: #e3e3e3;

            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: repeat(3, 50px);
            grid-gap: 1em;
        }

        #container > div {
            background: #999;
            font-weight: bold;
            color: white;
            font-family: sans-serif;
        }
    </style>
</head>
<body>
<section id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>
</body>
</html>

Aku ada 3 kotak, dua kotak pertama bersaiz 100px dan kotak ketiga aku mahukan dia mengambil baki saiz yang ada. Dalam kes ini 800px - 100px - 100px - 1em - 1em. Ya aku boleh capai dengan kaedah begitu tetapi sedikit “matematik”.

Maka diperkenalkan unit fr atau fraction ke dalam CSS grid. Tugasnya adalah untuk mengambil bahagian baki yang ada berdasarkan pecahan yang dinyatakan.

Sebagai contoh apabila kita tukarkan grid-template-columns: 100px 100px 100px; kepada grid-template-columns: 100px 100px 1fr;,  secara automatik browser akan membuat kiraan untuk kita seperti ini;

jumlah width = 800px
jumlah width telah digunakan = 100px + 100px
jumlah grid-gap dan margin = 1em + 1em
jumlah pecahan = 1
pecahan semasa = 1

baki width = 800px - 100px - 100px - 1em - 1em
           = 568px

∴ width grid pecahan = baki width * (pecahan semasa / jumlah pecahan)
                     = 568px * 1/1
                     = 568px

Yang akan menghasilkan grid kiraan manual tadi.

css-grid-fr-unit

Soalan: Jika boleh menggunakan kaedah manual, mengapa perlu menggunakan kaedah fr?

Jawapan: Jika kita memerlukan fr lebih daripada satu, maka kiraan manual akan menjadi rumit. Sebagai contoh;

kotak 1 = 100px

kotak 2 = 2/3 daripada baki width

kotak 3 = 1/3 daripada baki width

Dengan menggunakan kaedah fr, kita hanya perlu menukarkan kepada grid-template-columns: 100px 2fr 1fr; yang akan memberikan arahan kepada browser untuk memberikan 2 bahagian daripada 3 (2fr + 1fr) kepada kotak 2 dan 1 bahagian kepada kotak 3.

css grid 2 fr

Kaedah ini juga lebih kurang sama dengan flex: flex: 100px 2 1; tetapi seperti mana yang aku katakan pada entri yang sebelum ini, terdapat perbezaan keperluan untuk flex dan grid.

Nota: entri ini aku kecilkan kepada fraction sahaja kerana entri lepas terlalu banyak gambar.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.