Dapatkah Anda menggunakan bootstrap dengan kisi?

Pada bulan Maret, Mozilla merilis Firefox 52, yang menambahkan dukungan untuk CSS Grid Layout. Jika Anda tidak terbiasa dengan CSS Grid, ini adalah sistem tata letak dua dimensi untuk web yang memungkinkan kita membuat pola tata letak secara native di browser. Ini berarti kita dapat dengan mudah membuat ulang kisi-kisi yang sudah dikenal hanya dengan menggunakan beberapa baris CSS. Ini juga berarti kita dapat melakukan banyak hal dengan CSS dan tata letak yang tidak mungkin dilakukan sebelumnya… tetapi lebih dari itu sebentar lagi

Catatan singkat. Posting ini tidak dimaksudkan untuk menjadi primer komprehensif untuk CSS Grid, dan mengasumsikan keakraban dasar dengan CSS Grid. Jika Anda belum melakukannya, saya sarankan untuk melihat halaman Tata Letak Grid CSS yang fantastis di MDN

Tata letak di web selalu rumit. Saat web pertama kali diperkenalkan, belum ada metode untuk tata letak. Lalu muncul tabel (di tabel, di tabel, di tabel). Itu hackish dan aneh, tapi berhasil. Saat CSS diperkenalkan pada akhir tahun 90-an, developer dapat mulai menggunakan div dan float untuk desain dan tata letak mereka. Hal ini pada akhirnya mengarah pada kerangka kerja dan sistem kisi yang membantu memahami semua "gotcha" seperti pelampung kliring, margin negatif, desain responsif, dan lainnya. Dan begitulah keadaannya selama bertahun-tahun sekarang. Ada ribuan sistem grid, tetapi semuanya kurang lebih sama

Sekarang Tata Letak Grid CSS adalah kenyataan, saya ingin melihat apa yang diperlukan untuk mengganti kerangka kerja grid yang ada dengan CSS Grid. Untuk percobaan ini, saya memilih framework Bootstrap yang populer

Saya mulai dengan membuat situs dasar menggunakan kisi Bootstrap

Lihat di CodePen

Jadi mari kita uraikan ini dan ubah untuk menggunakan CSS Grid

Di Bootstrap, kelas .container_ membungkus semuanya dan menyetel batasan lebar. Itu juga menambahkan bantalan ke tepi kiri dan kanan dan memusatkan semuanya. Tidak banyak yang berubah di sini. Sama seperti dengan Bootstrap, kelas container dapat berguna untuk digunakan dengan CSS Grid. Saya membuatnya kembali seperti itu

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

Kami juga dapat menambahkan breakpoint responsif dengan menambahkan yang berikut ini

@media (min-width: 992px) {
    .container {
        width: 970px;
     }
}

Bootstrap menggunakan kelas .row_ untuk membungkus kolom dan memberikan margin negatif di kiri dan kanan untuk meniadakan padding yang ditambahkan oleh masing-masing kolom. Peretasan seperti margin negatif tidak lagi diperlukan dengan CSS Grid, tetapi jika Anda telah membaca dokumentasinya, Anda akan tahu bahwa CSS Grid memerlukan wadah grid. Kelas .row_ adalah tempat yang tepat untuk melakukan ini. Biarkan saya menunjukkan kepada Anda apa yang saya lakukan, dan kemudian kami akan memecahnya

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
}

display: grid_ membuat wadah kisi

Properti grid-template-columns_ menentukan kolom untuk kisi. Anda dapat menggunakan spasi untuk menentukan setiap kolom satu per satu, tetapi di sini kami menggunakan notasi berulang untuk menentukan 12 kolom berukuran sama. 1fr_ mengacu pada lebar masing-masing kolom. MDN mendefinisikan unit fr sebagai unit baru yang “mewakili sebagian kecil dari ruang yang tersedia dalam wadah grid. ” Anda dapat membaca lebih lanjut tentang MDN. Anda juga dapat membaca lebih lanjut tentang properti grid-template-columns

Akhirnya, properti

@media (min-width: 992px) {
    .container {
        width: 970px;
     }
}

Sekarang, yang tersisa hanyalah kelas kolom. Bootstrap menggunakan kelas kolom seperti

@media (min-width: 992px) {
    .container {
        width: 970px;
     }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
     }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
     }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
     }
}

@media (min-width: 992px) {
    .col-md-6 {
        grid-column: span 6;
    }
}

Sederhana, bukan? . Tidak ada bantalan. Itu hanya bekerja. Singkatan

@media (min-width: 992px) {
    .container {
        width: 970px;
     }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
     }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
     }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
     }
}

Jadi apa yang terjadi ketika Anda menggabungkan semuanya?

Lihat situs web yang diperbarui di CodePen

Eksperimen jenis ini adalah latihan pembelajaran yang menyenangkan, tetapi juga bisa berbahaya. Meminjam kalimat dari filsuf bijak Jeff Goldblum

“Kamu… begitu sibuk dengan apakah kamu bisa atau tidak, kamu tidak berhenti untuk berpikir jika kamu harus. ”

Kami tidak ingin membatasi CSS Grid dengan memasukkannya ke dalam sintaks yang akan membatasi potensinya. Kami dapat dengan mudah membuat ulang kisi Bootstrap, tetapi CSS Grid jauh lebih kuat daripada sistem kisi mana pun yang datang sebelumnya. Itu karena ini adalah solusi web-native yang dibangun dari bawah ke atas

Kita tidak lagi terkunci dalam 12 kisi kolom yang melayang dari kiri ke kanan. Apakah Anda ingin menempatkan elemen di lokasi yang tepat di grid, terlepas dari urutan sumber HTML-nya? . Apakah Anda ingin membuat item yang menjangkau banyak kolom dan baris? . Lihat demo ini yang dibuat oleh Craig Cook dari Mozilla untuk menampilkan berbagai pola tata letak. Coba buat ulang beberapa tata letak tersebut menggunakan Bootstrap (hint. tidak memungkinkan). Kami hanya menggores permukaan dari apa yang dapat dilakukan CSS Grids

Jika Anda ingin mempelajari lebih lanjut tentang CSS Grid, lihat sumber daya berikut

Demo Mozilla CSS Grid
Dokumentasi CSS Grid di MDN