CSS Grid menyelesaikan permasalahan layout yang tidak dapat diselesaikan dengan baik oleh solusi CSS lainnya. Di tutorial ini, kita akan belajar bagaimana memebuat sebuah layout menggunakan CSS Grid.
Tutorial ini tidak membahas CSS Grid secara mendalam, hanya sebagai pondasi awal untuk memprkenalkan potensi yang dapat diraih dengannya.
Ayo kita mulai.!!!
Hasil yang Akan Dicapai
Berikut ini layout yang akan kita dapatkan diakhir tutorial. Saya membuat layout ini sesederhana mungkin sehingga pembaca dapat mengikuti tutorial ini tanpa kesulitan yang berarti.
Persiapan
Kita tidak akan menggunakan framework atau build tools apapun supaya fokus pada implementasi CSS aslinya. Ada tiga file yang kita butuhkan yaitu satu file HTML, satu file CSS, dan satu lagi file gambar untuk logo.
Buat sebuah folder kosong baru dan buat file index.css dan index.html.
Isi file index.html dengan konten berikut.\
Berikut ini layout yang akan kita dapatkan diakhir tutorial. Saya membuat layout ini sesederhana mungkin sehingga pembaca dapat mengikuti tutorial ini tanpa kesulitan yang berarti.
Persiapan
Kita tidak akan menggunakan framework atau build tools apapun supaya fokus pada implementasi CSS aslinya. Ada tiga file yang kita butuhkan yaitu satu file HTML, satu file CSS, dan satu lagi file gambar untuk logo.
Buat sebuah folder kosong baru dan buat file index.css dan index.html.
Isi file index.html dengan konten berikut.\
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<html class="no-js" lang="en">
<head>
<title>CSS Grid Tutorial</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet">
<link media="all" type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
Konten HTML
Di dalam tag <body> di file index.html, kita akan membuat tiga section. Bagian header, main content, dan footer yang akan memiliki tidak panel unordered list:
Di dalam tag <body> di file index.html, kita akan membuat tiga section. Bagian header, main content, dan footer yang akan memiliki tidak panel unordered list:
<header>
<a href="#">Libertians > *</a>
</header>
<div class="container">
<div id="content">
<h1>Down with the state</h1>
<p>Abandon the left vs. right paradigm and adopt new ideals, where consistency and logic reign supreme.</p>
</div>
<img src="logo.png" />
</div>
<footer>
<ul>
<li>
<span>But what about the roads?</span>
You just don't understand economics, like supply and demand. Don't worry kiddo, where there's a demand there will be a supply; we'll all have our roads.
</li>
<li>
<span>Is taxation theft?</span>
If I came to your house with some heavily armed buddies, demanded that you and your neighbors give me a percentage of your income, in return for some crappy monopolized services that you didn't ask for, would you consider that theft?
</li>
<li>
<span>So, what you're saying is...?</span>
Libertarians want to live in a world where gay couples can protect their poppy fields with fully automatic weapons.
A world where voluntaryism and property rights are treated with the highest respect.
</li>
<li> <!-- Ulangi lagi tiga kali sehingga sekarang kita punya 6 list -->
<li> <!-- Ulangi lagi tiga kali sehingga sekarang kita punya 6 list -->
<li> <!-- Ulangi lagi tiga kali sehingga sekarang kita punya 6 list -->
</ul>
</footer>
Percantik dengan CSS
Agar nampak sedikit lebih indah, mari kita tambahkan beberapa properti CSS ke kode HTML yang sudah kita tulis. Tambahkan konten berikut ke file index.css:
body {font-family: 'Source Sans Pro';
background:red;
margin:0;
color:white;
}
a {
text-decoration:none;
color:red;
font-size:1.8em;
font-weight:700;
}
img {
width:150px;
}
header {
background:#FFFFFF;
padding: 1em;
}
.container {
padding: 4em 1em;
}
footer {
background:#571212;
}
ul {
margin:0;padding:0;
}
ul li {
padding: 2em;
color:#E98A8A;
}
ul li span {
display:block;
font-size:1.4em;
margin-bottom:1em;
color: white;
}
Kode di atas hanyalah kode CSS biasa yang sudah sering kita gunakan. Sekarang sisanya hanya menentukan properti CSS grid untuk layout.
Social Plugin