Contoh Dalam Membuat Block Grid dan Skrip Coding Untuk Mengatur Dalam Foundation

Block Grid

Block grid digunakan untuk membagi layout menjadi beberapa kolom yang memiliki lebar sama. Block grid dibuat dengan tag ul dan li dengan cara memberi class .large-block-grid-x, .medium-block-grid-x dan .small-block-grid-x pada tag ul. Nilai x antara 1 sampai 12.

Skrip block_grid.html

<ul class="small-block-grid-4 medium-block-grid-4

                        large-block-grid-5">

    <li> <img src="gambar/1.jpg"> </li>

    <li> <img src="gambar/2.jpg"> </li>

    <li> <img src="gambar/3.jpg"> </li>

    <li> <img src="gambar/4.jpg"> </li>

    <li> <img src="gambar/5.jpg"> </li>

    <li> <img src="gambar/1.jpg"> </li>

    <li> <img src="gambar/2.jpg"> </li>

    <li> <img src="gambar/3.jpg"> </li>

    <li> <img src="gambar/4.jpg"> </li>

    <li> <img src="gambar/5.jpg"> </li>

</ul>

Baca Juga: Inilah skrip kolom nasted di Foundation!

Share :