Bismillah..
Halo Sahabat Rumah Belajar Soetrisno Soekarno, kali ini saya akan lanjutkan materi tentang web desain dengan tema CSS Grid.
CSS GRID
Oleh: Sutrisno Sukarno, M.Kom
Referensi:
-
https://www.w3schools.com/css/css_grid.asp
Materi yang harus sudah dikuasai:
-
HTML Dasar
-
CSS Dasar
-
Flex Box
A.
Contoh Grid Layout
Koding dari Layout di atas menggunakan display Grid, buat
file dengan nama grid1.html
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
#tengah {
text-align: center;
}
</style>
</head>
<body>
<h1 id="tengah">Latihan CSS Grid 1 -
Universitas Safin Pati</h1>
<p>CSS Grid Module adalah
sistem tata letak berbasis grid, dengan baris dan kolom, sehingga memudahkan
mendesain halaman web tanpa harus menggunakan float dan positioning.</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
B.
Grid Layout
CSS
Grid Module adalah sistem tata letak berbasis grid, dengan baris dan kolom,
sehingga memudahkan mendesain halaman web tanpa harus menggunakan float dan
positioning.
C.
Browser
Support
Properti
CSS Grid sudah support di semua browser terkini.
D.
Grid Elemen
Layout Grid terdiri dari elemen
induk dengan satu atau lebih elemen turunannya.
Display:Grid;
Latihan grid2.html
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns:
auto auto auto;
background-color: #2196F3;
padding: 20px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>display: grid</h1>
<p>Use display: grid; to
make a block-level grid container:</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Result:
Display:Inline-grid;
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: inline-grid;
grid-template-columns:
auto auto auto;
background-color: #2196F3;
padding: 20px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>display: inline-grid</h1>
<p>Use display: grid; sesuai
dengan konten yang ada di dalam item</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Result:
Grid
Columns
The vertical lines of grid items are
called columns.
Grid
Rows
The horizontal lines of grid items are
called rows.
Grid
Gaps
The spaces between each column/row are
called gaps.
You can adjust the gap size by using
one of the following properties:
- column-gap
- row-gap
- gap
Contoh column-gap.html
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
column-gap: 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The column-gap Property</h1>
<p>Use the <em>column-gap</em> property to adjust the
space between the columns:</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Result colum-gap.html
Contoh row-gap.html
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
row-gap: 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The row-gap Property</h1>
<p>Use the <em>row-gap</em> property to adjust the
space between the rows:</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Hasil di browser:
Gap.html
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
gap: 100px 10px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The gap Property</h1>
<p>Use the <em>gap</em> shorthand property to
adjust the space between the columns and rows.</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Result:
Ok materi selanjutnya bisa di lihat di:
https://www.w3schools.com/css/css_grid_container.asp
https://www.w3schools.com/css/css_grid_item.asp
Silahkan di pelajari, di praktekan dan di ulang ulang
Semoga sukses
Tidak ada komentar:
Posting Komentar