Rahasia untuk maju adalah memulai

Home » Penelusuran Design Web Dasar Menggunakan CSS
Design Web Dasar Menggunakan CSS

Design Web Dasar Menggunakan CSS

Layout

Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar. Sama seperti tipografi, terdapat sangat banyak elemen-elemen pada layout, yang tentunya tidak akan dapat dibahas pada bagian ini sendiri. Pembahasan layout secara menyeluruh akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut dengan HTML dan CSS.
Sebuah dokumen web umumnya memiliki elemen-elemen sebagai berikut:
Elemen-elemen Layout pada Dokumen Web
Elemen-elemen Layout pada Dokumen Web
Elemen Header
Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan.
Elemen Navigation
Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.
Elemen Sidebar
Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.
Elemen Konten
Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.
Elemen Footer
Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.
Bagaimana kita dapat membuat layout umum seperti yang tampak pada gambar Elemen-elemen Layout pada Dokumen Web di atas? Sebelum membuat layout, tentunya kita terlebih dahulu harus mengetahui cara pengukuran elemen pada HTML. Karena tanpa dapat mengukur elemen dengan benar, kita tidak akan dapat membuat layout yang bagus.

Box Model

Salah satu prinsip mendasar dalam menyusun elemen-elemen HTML ialah Box Model. Apa itu box model? Konsep box model pada dasarnya merupakan konsep yang menyatakan bahwa elemen-elemen yang ada di dalam HTML adalah berbentuk kotak. Sekali lagi, seluruh elemen HTML berbentuk kotak. Ukuran dari setiap elemen itu sendiri dipengaruhi oleh isi dari elemen, margin,padding, dan border dari elemen tersebut.
Semua elemen juga dapat dikategorikan ke dalam dua cara penampilan, yaitu:
  • Block Level Element merupakan elemen yang selalu dimulai pada baris baru, dan menambahkan baris baru pada akhir elemen. Hal ini menyebabkan elemen yang bersifat block akan selalu berada pada baris barunya sendiri ketika dituliskan. Contoh dari elemen block: p, h1, dan blockquote.
  • Inline Level Elements merupakan elemen yang tidak membuat baris baru ketika dibuat. Elemen ini akan mengikuti alur dokumen sebagaimana mestinya, dan memiliki ukuran tinggi yang ditentukan serta ukuran lebar yang sesuai dengan isi elemen. Contoh dari elemen inline:span, b, i.
Perlu diperhatikan bahwa karena sifatnya, sebuah elemen inline tidak akan dapat menampung elemen blok (memiliki elemen blok di dalamnya), sementara elemen blok dapat menampung elemen blok maupun inline.
Kode di bawah memperlihatkan contoh perbedaan block level elemen dengan inline level element:
<h1>Elemen H1</h1>
<p>Elemen p otomatis membuka baris baru dari elemen h1, tetapi elemen
<b>bold</b> ini tidak</p>
Jalankan kode di atas untuk melihat efeknya!
Seperti yang telah dijelaskan sebelumnya, sebuah elemen HTML berbentuk kotak, dan ukurannya dipengaruhi oleh isi elemen, margin, padding, dan border. Kode berikut menunjukkan contoh total luas sebuah elemen, lakukan simpan kode ke dalam sebuah file HTML dan jalankan untuk melihat hasilnya:
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #boxmodel {
                background: #CDE;
                border: 25px solid #ABC;
                height: 100px;
                margin: 25px;
                padding: 25px;
                width: 300px;
            }
        </style>
    </head>
    <body>
        <div>Box Model</div>
        <div id="boxmodel">
        </div>
        <div>Box Model</div>
    </body>
</html>
Hasil dari eksekusi kode adalah sebagai berikut:
Hasil Eksekusi Kode Box Model
Hasil Eksekusi Box Model
Bagaimana panjang dan lebar dari kotak pada kode di atas? Mari kita lihat selengkapnya:
Pengukuran Box Model
Pengukuran Box Model
Seperti yang dapat dilihat pada gambar di atas, pengukuran total dari panjang elemen adalah:
margin-right + border-right + padding-right + width + padding-left +
border-left + margin-left
dan tinggi total dari sebuah elemen adalah:
margin-top + border-top + padding-top + height + padding-bottom +
border-bottom + margin-bottom
sehingga total dari panjang elemen tersebut yaitu 450px, dan total tinggi elemen ialah 250px.
Mari kita lihat properti-properti CSS yang mempengaruhi box model.

Properti Height dan Width

Setiap elemen yang ada dalam HTML memiliki tinggi dan lebar yang standar, yang didapatkan dengan menyesuaikan ukuran konten. Tergantung kepada tujuan pembuatan dokumen, tinggi dan lebar standar yang diberikan oleh elemen mungkin saja tidak tepat digunakan. Properti height dan weight digunakan untuk mengubah tinggi dan lebar standar ketika dibutuhkan.
Berikut adalah contoh pengunaan kedua properti ini:
div {
    height: 20px;
    width: 30px;
}
Kedua properti ini hanya dapat digunakan untuk block level element.

Properti Margin dan Padding

Setiap browser memberkan jarak antar elemen secara standar, agar elemen-elemen HTML dapat ditampilkan dengan optimal. Jarak antar elemen ini berbeda-beda, tergantung kepada browser yang mengimplementasikan. Untuk mengubah jarak antar elemen, kita dapat menggunakan properti margin.
Terkadang kita juga ingin memberikan jarak di dalam elemen sendiri, yaitu jarak dari konten elemen ke pembatas (border) elemen. Jarak ini dikenal dengan nama padding. Padding kerap digunakan untuk memberikan warna latar yang baik pada elemen. Berikut adalah contoh kode pengunaan margin dan padding:
div {
    margin: 10px;
    padding: 15px;
}
Untuk lebih jelasnya, lihat juga gambar Pengukuran Box Model pada bagain margin dan padding.
Sedikit catatan tambahan, properti padding dan margin dapat juga ditulis dengan singkat. Penulisan hanya dengan satu nilai seperti pada kode di atas akan menyebabkan nilai padding dan margin diimplementasikan pada keempat sisi elemen:
p {
    margin: 40px;
}
Mengisikan dua nilai akan mengisikan nilai padding dan margin atas dan bawah pada nilai pertama, serta kiri dan kanan pada nilai kedua, seperti berikut:
p {
    /*
        margin-top: 25px
        margin-bottom: 25px

        margin-left: 50px;
        margin-right: 50px;
    */
    margin: 25px 50px;
}
Dan seperti yang dapat ditebak, pengisian empat nilai akan dilakukan secara berurutan pada margin dan padding atas, kanan, bawah, dan kiri:
p {
    /*
        margin-top: 10px
        margin-right: 20px;
        margin-bottom: 30px
        margin-left: 40px;
    */
    margin: 10px 20px 30px 40px;
}
Selain itu, kita juga dapat mengubah hanya satu bagian dari margin ataupun padding dengan menambahkan kata top, right, bottom, dan left setelah margin atau padding seperti berikut:
p {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px
    margin-left: 40px;
}

Border

Border, sebagai pemberi tanda batas elemen memisahkan margin dan padding. Terdapat tiga properti utama yang membentuk sebuah border, yaitu border-width, border-style, danborder-color.
border-width
Seperti namanya, properti ini menentukan ketebalan border, yang diisikan dengan nilai pixel. Contoh kode adalah sebagai berikut:
div {
    border-width: 10px;
}
border-style
Menentukan cara penampilan dari border. Pilihan nilai yang dapat diisikan yaitu: none, hidden,dotted, dashed, solid, double, groove, ridge, inset, dan outset. Ingin mengetahui kegunaan masing-masing nilai? Silahkan coba implementasikan elemen tersebut! Jika tidak diisikan, maka secara otomatis nilai yang dipilih ialah none, sehingga border tidak akan tampak.
Contoh kode:
div {
    border-style: dotted;
}
border-color
Seperti namanya, memberikan warna kepada border. Jika warna tidak diberikan, maka border akan menjadi warna hitam. Contoh kode:
div {
    border-color: red;
}
Ketiga properti di atas seringkali digunakan bersamaan, karena ketergantungan antar properti tersebut dalam membuat border yang indah. Penggabungan ketiga properti dapat ditulis dalam properti border seperti berikut:
div {
    border: 1px solid red;
}
Dan seperti yang dapat dilihat dari kode di atas, tentunya urutan penulisannya ialahborder-width border-style border-color.
Meskipun seluruh elemen pada dasarnya berbentuk kotak, CSS memungkinkan kita untuk menampilkan elemen dengan sedikit variasi, yaitu memberikan sudut bulat kepada elemen.
Contoh Elemen dengan Sudut Bulat
Contoh Elemen dengan Sudut Bulat
Kita dapat menggunakan properti border-radius untuk membuat efek sudut bulat, seperti pada kode di bawah:
div {
    border-radius: 10px;
}
Selain pengisian dengan satu nilai, tentunya border-radius dapat diisikan dengan banyak nilai. Sayangnya, karena kompleksitas properti ini, maka pembahasan lebih jauh mengenaiborder-radius tidak akan dilakukan. Jika ingin mengetahui detil dari elemen ini, silahkan baca di sini.

Penyusunan Elemen

Pengukuran elemen dengan mengikut sertakan box model hanya merupakan sebagian pengetahuan yang diperlukan untuk membuat layout halaman yang sempurna. Pengetahuan lain yang harus dimengerti juga ialah cara menyusun elemen-elemen yang ada di dalam dokumen. Bagian ini akan membahas bagaimana menyusun elemen-elemen yang ada dalam dokumen, dengan berbagai teknik yang disediakan oleh HTML dan CSS.

Penampungan Elemen

Apa maksud dari “penampung” sebuah elemen? Elemen penampung ialah elemen yang memiliki banyak elemen-elemen lain di dalamnya. Misalnya, pada kode di bawah:
<p>
    Ini adalah sebuah paragraf, yang didalamnya terdapat
    elemen <b>bold</b>, <i>italic</i>, <em>emphasis</em>,
    dan <strong>strong</strong>.
</p>
Pada kode di atas, elemen p merupakan penampung dari elemen b, i, em, dan strong. Bagaimana jika kita tidak ingin menggunakan p untuk menampung seluruh elemen-elemen yang ada? Untuk menampung elemen-elemen secara generik, kita dapat menggunakan elemen div. Elemen div merupakan elemen yang dirancang sebagai penampung dari elemen lainnya, sehingga elemen ini tidak memiliki makna semantik. Kita dapat menggunakan div untuk menampung berbagai elemen, tanpa batasan, misalnya:
<div class="wrapper">
    <section id="articles">
        <article>
            <!-- Teks -->
        </article>
        <article>
            <!-- Teks -->
        </article>
        <article>
            <!-- Teks -->
        </article>
    </section>
    <aside>
        <nav>
            <!-- Menus -->
        </nav>
    </aside>
</div>
Dapat dilihat bagaimana div.wrapper di atas menampung banyak elemen-elemen blok lainnya. Dengan kode HTML di atas, panjang dari elemen-elemen yang ada di dalam div.wrapper tidak akan pernah lebih panjang dibandingkan dengan div.wrapper itu sendiri. Coba jalankan kode di bawah untuk melihat bagaimana elemen-elemen yang ada di dalam div.wrapper tidak dapat melewati ukuran div.wrapper itu sendiri:
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .wrapper {
                background: red;
                color: white;
                height: 600px;
                width: 800px;
            }
        </style>
    </head>

    <body>
        <div class="wrapper">
            <p>
            Proin nec rhoncus, quis, elementum amet parturient augue
            sagittis dictumst in dolor scelerisque pid, sociis enim
            porttitor et, porta porttitor. Tincidunt egestas ultricies,
            scelerisque.
            </p>
            <p>
            Dis augue, in elementum lundium lectus porttitor duis turpis
            dis. Nisi vel porta turpis arcu nec diam penatibus, et sit
            integer enim scelerisque ut amet? Nascetur nisi parturient
            lundium augue?
            </p>
            Odio sagittis cursus et ut ridiculus pulvinar habitasse,
            elementum et tristique non, nisi porttitor magna! Tristique
            adipiscing penatibus sed nunc. Non pulvinar vut porttitor!
            Odio nisi porttitor sit tincidunt dictumst, massa rhoncus.
            Sociis enim habitasse enim, nunc nascetur, ridiculus, et mus
            nascetur, augue ultricies aliquet mus a adipiscing amet?
            </p>
        </div>
            <p>
            Proin nec rhoncus, quis, elementum amet parturient augue
            sagittis dictumst in dolor scelerisque pid, sociis enim
            porttitor et, porta porttitor. Tincidunt egestas ultricies,
            scelerisque.
            </p>
            <p>
            Dis augue, in elementum lundium lectus porttitor duis turpis
            dis. Nisi vel porta turpis arcu nec diam penatibus, et sit
            integer enim scelerisque ut amet? Nascetur nisi parturient
            lundium augue?
            </p>
    </body>
</html>
Ketika kode dijalankan maka hasilnya adalah sebagai berikut:
Hasil Eksekusi Kode div.wrapper
Hasil Eksekusi Kode div.wrapper
Perhatikan bagaimana paragraf yang berada di luar div.wraapper dapat melewati 800px (panjang dari div.wrapper) sementara paragraf yang berada di dalam div.wrapper harus berpindah baris ketika mencapai ujung dari div.wrapper.

Floating Element

Bagaimana dengan penyusunan elemen yang berada di dalam penampung? Salah satu cara untuk mengorganisasikan posisi elemen yang saling bersisian ialah menggunakan properti float. Properti float memungkinkan kita membuat sebuah elemen “mengapung” pada sisi kiri ataupun kanan dari penampung elemen tersebut. Untuk lebih mudahnya, mari kita lihat cara kerja dari elemen float secara langsung!
Ganti kode CSS dari kode pada gambar Hasil Eksekusi Kode div.wrapper menjadi kode berikut:
.wrapper {
    background: red;
    color: white;
    height: 600px;
    width: 800px;
}

.wrapper p {
    background: blue;
    color: white;
    float: left;
    margin: 10px;
    padding: 10px;
    width: 200px;
}
dan kemudian jalankan. Anda akan dapat melihat bagaimana paragraf-paragraf di dalamdiv.wrapper menjadi berukuran kecil, dan “terbang” saling bersisian, ke arah kiri. Paragraf yang paling pertama kali dituliskan akan menjadi paragraf yang paling kiri, dan seterusnya.
Float: Left
Float: Left
Dan hal sebaliknya akan terjadi ketika kita mengubah nilai float menjadi right. Paragraf yang paling pertama kali dituliskan menjadi paragraf yang paling kanan, dan seterusnya.
Float: Right
Float: Right
Hal lainnya yang perlu diperhatikan ialah bahwa properti float merusak alur dari halaman. Apa artinya merusak alur dari halaman? Ketika menggunakan properti ini maka elemen-elemen lain akan menjadi terpaksa mengikuti aturan kanan maupun kiri dari float. Misalnya, jika kita menambahkan sebuah h1 setelah paragraf ketiga, sehingga isi dari div.wrapper adalah sebagai berikut:
<div class="wrapper">
    <p>
    Proin nec rhoncus, quis, elementum amet parturient augue sagittis
    dictumst in dolor scelerisque pid, sociis enim porttitor et, porta
    porttitor. Tincidunt egestas ultricies, scelerisque.
    </p>
    <p>
    Dis augue, in elementum lundium lectus porttitor duis turpis dis.
    Nisi vel porta turpis arcu nec diam penatibus, et sit integer enim
    scelerisque ut amet? Nascetur nisi parturient lundium augue?
    </p>
    <p>
    Odio sagittis cursus et ut ridiculus pulvinar habitasse, elementum
    et tristique non, nisi porttitor magna! Tristique adipiscing
    penatibus sed nunc. Non pulvinar vut porttitor! Odio nisi porttitor
    sit tincidunt dictumst, massa rhoncus. Sociis enim habitasse enim,
    nunc nascetur, ridiculus, et mus nascetur, augue ultricies aliquet
    mus a adipiscing amet?
    </p>
    <h1>Ini adalah sebuah judul yang terpengaruh float.</h1>
</div>
Maka elemen h1 tersebut akan secara otomatis mengikuti alur elemen-elemen p sebelumnya, dan mulai dari akhir elemen p terakhir, seperti pada gambar berikut:
Float: Right dengan H1
Float: Right dengan H1
Bagaimana jika kita ingin memaksa h1 kembali ke alur halaman yang benar? Untuk menghapus segala “jejak” dari float dan mengembalikan alur halaman ke alur normal, kita dapat menggunakan properti clear. Tambahkan kode CSS berikut:
.wrapper h1 {
    clear: both;
}
maka elemen h1 akan secara otomatis membuka baris baru, sesuai dengan alur halaman yang seharusnya.
Mengembalikan Alur Halaman dengan Clear
Mengembalikan Alur Halaman dengan Clear
dan dengan begitu, tentunya kita dapat dengan mudah membuat layout seperti pada gambarElemen-elemen Layout pada Dokumen Web, bukan?

Pembangunan Layout Web Dasar

Layout web dasar yang sering kita temukan adalah seperti yang ada pada gambar Elemen-elemen Layout pada Dokumen Web.
Elemen-elemen Layout pada Dokumen Web
Elemen-elemen Layout pada Dokumen Web
Bagaimana kita dapat membangun layout seperti pada gambar di atas? Berdasarkan apa yang telah kita pelajari sejauh ini, tentunya anda telah dapat membayangkan apa yang harus dilakukan. Sederhananya: width dan height pada seluruh elemen, float pada sidebar dan content, sertaclear pada footer. Perlu diingat juga bahwa pada dokumen web yang sebenarnya, propertiheight jarang digunakan karena tinggi elemen biasanya ditentukan oleh isi dari elemen itu sendiri.
Untuk membuat layout seperti pada gambar Elemen-elemen Layout pada Dokumen Web, kita dapat menggunakan kode HTML dan CSS berikut:
<!DOCTYPE html>
<html>
    <head>
        <title>Layout Dasar Dokumen Web</title>

        <style type="text/css">
            body {
                width: 960px;
            }

            header, nav, aside, section, footer {
                background: #14BCE6;
                border: 1px solid white;
                color: white;
                font-size: 2em;
                font-variant: small-caps;
                text-align: center;
            }

            header, nav, footer {
                width: 100%;
            }

            header, footer {
                height: 100px;
            }

            nav {
                height: 50px;
            }

            aside {
                float: left;
                height: 250px;
                width: 29.5%;
            }

            section#content {
                float: right;
                height: 250px;
                width: 70%;
            }

            footer {
                clear: both;
            }
        </style>
    </head>

    <body>
        <header>Header</header>

        <nav>Navigation</nav>

        <aside>Sidebar</aside> <section id="content">Content</section>

        <footer>Footer</footer>
    </body>
</html>
Eksekusi kode, dan kita akan dapat melihat hasil eksekusi sebagai berikut:
Hasil Pembuatan Layout Standar Dokumen Web
Hasil Pembuatan Layout Standar Dokumen Web
Cara membuat teks yang ada di dalam elemen-elemen HTML berada di tengah secara vertikal akan dibiarkan untuk menjadi latihan bagi pembaca.
Perhatikan juga bahwa kode yang digunakan untuk membuat tampilan di atas tidak lagi terurut sesuai dengan penulisan kode, seperti pada gambar di bawah:
Transformasi Kode ke Halaman Web (`Sumber`_)
Transformasi Kode ke Halaman Web (Sumber)

Clear Fix

Salah satu permasalahan utama dari pengunaan float ialah ketika kita menggunakan sebuah elemen kontainer yang hanya menampung elemen float saja. Karena sifat utama dari float yang “menerbangkan” elemen, maka kontainer menjadi dianggap tidak memiliki tinggi, dan elemen-elemen lain akan langsung berada di bawah elemen kontainer tersebut. Penjelasan mengenai bagaimana menyelesaikan masalah ini telah diberikan sebelumnya, pada bagian Floating Element, di mana kita menggunakan kode CSS berikut:
.wrapper h1 {
    clear: both;
}
untuk menyelesaikan masalah. Sayangnya, kode di atas tidak menyelesaikan seluruh masalah yang ada, karena jika kita tidak mengetahui dengan pasti di mana elemen selanjutnya akan diletakkan, maka kode di atas tidak akan dapat bekerja dengan baik. Metode lain untuk membersihkan float ialah dengan menggunakan teknik “clear fix”, yang kodenya dapat dilihat sebagai berikut:
.container {
    margin: 0;
    padding: 0;
}

.container:before,
.container:after {
    content:"";
    display:table;
}
.container:after {
    clear:both;
}
Pada prinsipnya, kode di atas membersihkan float dengan clear: both dan penambahan sebuah tabel “dummy” sebelum dan sesudah elemen penampung.

Grid

Sebuah layout yang baik menyusun elemen-elemen halaman dengan rapi dan mudah diprediksi. Kemudahan prediksi penting agar pembaca / pengguna web anda tidak perlu berpikir dalam menggunakan web anda. Ingat, “Don’t Make Me Think” merupakan salah satu prinsip dasar dalam pembuatan antarmuka web dan aplikasi secara general. Salah satu cara untuk membuat halaman lebih mudah diprediksi ialah dengan menggunakan garis pembantu penyusunan elemen, yang dikenal dengan nama “Grid” pada dunia web.
Sebagai garis pembantu dalam menyusun elemen, Grid dibuat dalam berbagai bentuk dan ukuran, sesuai dengan keperluan. Penempatan elemen dilakukan di dalam sebuah Grid, ataupun di dalam beberapa Grid. Pemakaian Grid umumnya dilakukan untuk menyusun elemen secara merata. Untuk lebih mudahnya, perhatikan gambar berikut:
Contoh Pengunaan Grid pada Drupal
Contoh Pengunaan Grid pada Drupal
Pada gambar Contoh Pengunaan Grid pada Drupal, kita dapat melihat bagaimana situs Drupal dibangun menggunakan 12 buah Grid, yang masing-masing elemennya disusun berdasarkan Grid tersebuut. Elemen feature Drupal, yang berada di paling atas halaman, mengambil ruang 12 Grid, sementara 3 elemen informasi mengenai drupal masing-masing mengambil 4 Grid. Penyusunan seperti ini kerap kali ditemukan dalam banyak website-website lain, dengan ukuran Grid yang berbeda-beda.

Pembuatan Grid

Pembuatan Grid dapat dilakukan dengan mudah, dengan melakukan pembagian terhadap ukuran halaman web yang ingin dibangun dengan jumlah kolom Grid yang diinginkan, dengan memperhitungkan Box Model juga tentunya. Misalkan, jika ingin membuat halaman berukuran960 px memiliki 12 Grid, kita dapat melakukan perhitungan berikut:
lebar_grid = 960 / 12
lebar_grid = 80 px
dan dengan memperkirakan box model, jika ingin setiap kolom memiliki jarak 20 px kita dapat menambahkan margin ke kiri dan ke kanan pada setiap kolom, sebanyak setengah dari jarak yang diinginkan (10 px), seperti berikut:
konten_grid = 80 - jarak
            = 80 - 20
            = 60 px
Sehingga ukuran margin kiri dan kanan dari elemen adalah:
margin_kiri_kanan = jarak / 2
                  = 20 / 2
                  = 10 px
Dengan perhitungan yang telah dilakukan, maka kita dapat memperkirakan bentuk dari sebuah Grid adalah sebagai berikut:
Perkiraan Bentuk Sebuah Grid
Perkiraan Bentuk Sebuah Grid
dan dengan mengurutkan kedua belas Grid tersebut, kita bisa mendapatkan sebuah halaman yang berukuran 960 px. Tentunya dengan prinsip yang sama kita juga dapat membuat Grid yang merupakan gabungan dari 2 Grid, 3 Grid, sampai 12 Grid!
Grid, dari 1 Grid sampai gabungan 12 Grid
Grid, dari 1 Grid sampai gabungan 12 Grid
Pembuatan kode Grid menggunakan CSS sendiri sangatlah sederhana. Kita dapat memulai pembuatan kode dengan memberikan nama kelas, untuk setiap ukuran Grid. Misalnya, kita menggunakan nama kelas “coln” untuk setiap kolom Grid, dengan n adalah lebar kolom yang diinginkan. Misalnya, kolom berukuran 2 Grid akan memiliki nama kelas col2, 4 kolom memiliki nama kelas col4, dan seterusnya.
Untuk mengawali, hilangkan padding, margin atas bawah, dan berikan warna serta float kepada seluruh kolom yang ada:
.col1, .col2, .col3, .col4,
.col5, .col6, .col7, .col8,
.col9, .col10, .col11, .col12 {
    background: #CCC;
    display: block;
    float: left;
    height: 30px;
    line-height: 30px;
    margin: 0 10px 0 10px;
    padding: 0;
    text-align: center;
}
Kemudian, kita dapat mengaplikasikan perhitungan yang telah dilakukan sebelumnya ke masing-masing ukuran kolom:
.col1 {
    width: 60px;
}

.col2 {
    width: 140px;
}

.col3 {
    width: 220px;
}

.col4 {
    width: 300px;
}

.col5 {
    width: 380px;
}

.col6 {
    width: 460px;
}

.col7 {
    width: 540px;
}

.col8 {
    width: 620px;
}

.col9 {
    width: 700px;
}

.col10 {
    width: 780px;
}

.col11 {
    width: 860px;
}

.col12 {
    width: 940px;
}
dan kemudian, tentunya container dan clearfix untuk setiap container yang ada:
.container {
    background: #555;
    margin: 0;
    padding: 0;
    width: 960px;
}

.container:before,
.container:after,
.row:before,
.row:after {
    content:"";
    display:table;
}
.container:after,
.row:after {
    clear:both;
}

.row {
    clear: both;
    margin: 10px 0 10px 0;
}
Untuk melihat efeknya, simpan seluruh kode CSS di atas ke dalam sebuah file bernama grid.css, dan jalankan kode HTML berikut:
<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Grid pada HTML</title>
        <link rel="stylesheet" href="grid.css">
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
            </div>

            <div class="row">
                <div class="col2">2</div>
                <div class="col2">2</div>
                <div class="col2">2</div>
                <div class="col2">2</div>
                <div class="col2">2</div>
                <div class="col2">2</div>
            </div>

            <div class="row">
                <div class="col3">3</div>
                <div class="col3">3</div>
                <div class="col3">3</div>
                <div class="col3">3</div>
            </div>

            <div class="row">
                <div class="col4">4</div>
                <div class="col4">4</div>
                <div class="col4">4</div>
            </div>

            <div class="row">
                <div class="col5">5</div>
                <div class="col5">5</div>
                <div class="col2">2</div>
            </div>

            <div class="row">
                <div class="col6">6</div>
                <div class="col6">6</div>
            </div>

            <div class="row">
                <div class="col7">7</div>
                <div class="col5">5</div>
            </div>

            <div class="row">
                <div class="col8">8</div>
                <div class="col4">4</div>
            </div>

            <div class="row">
                <div class="col9">9</div>
                <div class="col3">3</div>
            </div>

            <div class="row">
                <div class="col10">10</div>
                <div class="col2">2</div>
            </div>

            <div class="row">
                <div class="col11">11</div>
                <div class="col1">1</div>
            </div>

            <div class="row">
                <div class="col12">12</div>
            </div>
        </div>
    </body>
</html>
Jalankan kode HTML di atas, untuk melihat hasil seperti pada gambar Grid, dari 1 Grid sampai gabungan 12 Grid.
Back To Top