Cara menggunakan latihan css grid

Question

Saya yakin, jika kamu memahami sistem grid.. kamu akan bisa membuat layout web dengan mudah dan bagaimanapun bentuknya.

Table of Contents Show

Apa itu Sistem Grid di Bootstrap?
Memahami Breakpoint
Class Container
Class <div class="row"> </div>3 dan <div class="row"> </div>4
Class Gutter
Latihan: Layout 1 Kolom
Latihan: Layout 2 Kolom
Latihan: Layout 3 Kolom
Latihan: Layout 4 Kolom
Latihan: Challenge!
Apa Selanjutnya?
Apa itu grid pada CSS?
Grid template areas untuk apa?
Apa itu grid dalam HTML?
Apa itu grid template Column?

Pada tutorial ini..

Kita akan belajar tentang pengertian sistem grid,

class-class untuk membuat sistem grid,

dan latihan menggunakan sistem grid untuk membuat beberapa macam layout web.

Sudah siap?

Mari kita mulai..

Apa itu Sistem Grid di Bootstrap?

Sistem Grid adalah sistem yang digunakan Bootstrap untuk mengatur tata letak (layout). Sistem ini terdiri dari 12 kolom dan 6 breakpoint.

Satu kolom penuh panjangnya adalah 12. Jika kolom dibagi dua maka panjangnya akan menjadi 6.

Jika dibagi lagi, maka panjang kolomnya akan semakin kecil, hingga yang paling kecil adalah 1. Ini artinya, kolom pada grid hanya bisa dibagi sampai 12 saja.

Selain untuk menentukan tata letak, Grid juga berfungsi sebagai guide line bagi desainer. Sehingga nanti akan membuat desain lebih mudah diterapkan ke dalam kode.

Memahami Breakpoint

Breakpoint adalah ukuran lebar yang menentukan tampilan responsif terhadap ukuran viewport perangkat tertentu.

Saat ini Bootstrap memiliki 6 ukuran Breakpoint, yakni

<div class="col-12 col-lg-8">
	<!-- ukuran kolom ini 12 pada layar hp -->
  <!-- ukuran kolom ini 8 pada layar komputer -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>

3,

<div class="col-12 col-lg-8">
	<!-- ukuran kolom ini 12 pada layar hp -->
  <!-- ukuran kolom ini 8 pada layar komputer -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>

4,

<div class="col-12 col-lg-8">
	<!-- ukuran kolom ini 12 pada layar hp -->
  <!-- ukuran kolom ini 8 pada layar komputer -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>

5,

<div class="col-12 col-lg-8">
	<!-- ukuran kolom ini 12 pada layar hp -->
  <!-- ukuran kolom ini 8 pada layar komputer -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>

6,

<div class="col-12 col-lg-8">
	<!-- ukuran kolom ini 12 pada layar hp -->
  <!-- ukuran kolom ini 8 pada layar komputer -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>

7, dan

<div class="col-12 col-lg-8">
	<!-- ukuran kolom ini 12 pada layar hp -->
  <!-- ukuran kolom ini 8 pada layar komputer -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>

8.

Perhatikan gambar berikut.

Ini adalah ukuran breakpoint sesaui dengan ukuran layar perangkat.

Ingat!

Bootstrap adalah framework yang menggunakan pendekatan mobile first, jadi kita harus memikirkan tampilan di mobile terlebih dahulu sebelum membuat tampilan untuk desktop.

Karena itu, nilai default breakpoint adalah

<div class="col-12 col-lg-8">
	<!-- ukuran kolom ini 12 pada layar hp -->
  <!-- ukuran kolom ini 8 pada layar komputer -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>

3. Ukuran ini adalah ukuran yang paling kecil, yakni sekitar 576px.

Contoh:

<div class="col-12">
<!-- ukuran kolom ini 12 -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>

Pada contoh tersebut, kita memberikan ukuran kolom

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Container</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

  <header>
    <div class="container bg-info text-white">
      <h1>Contoh Container</h1>
    </div>
  </header>

</body>

</html>

0 dan

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Container</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

  <header>
    <div class="container bg-info text-white">
      <h1>Contoh Container</h1>
    </div>
  </header>

</body>

</html>

1 tanpa menggunakan breakpoint.

Artinya:

Ukuran kolom tersebut akan tetap

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Container</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

  <header>
    <div class="container bg-info text-white">
      <h1>Contoh Container</h1>
    </div>
  </header>

</body>

</html>

0 dan

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Container</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

  <header>
    <div class="container bg-info text-white">
      <h1>Contoh Container</h1>
    </div>
  </header>

</body>

</html>

1 di semua ukuran layar.

Gimana kalau kita ingin mengubah, misalnya menjadi

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Container</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

  <header>
    <div class="container bg-info text-white">
      <h1>Contoh Container</h1>
    </div>
  </header>

</body>

</html>

4 pada layar komputer dan tetap

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Container</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

  <header>
    <div class="container bg-info text-white">
      <h1>Contoh Container</h1>
    </div>
  </header>

</body>

</html>

0 pada layar HP.

Gampang!

Tinggal berikan breakpoint.

<div class="col-12 col-lg-8">
	<!-- ukuran kolom ini 12 pada layar hp -->
  <!-- ukuran kolom ini 8 pada layar komputer -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>

Nah, sekarang ukurannya akan menjadi 8 di layar komputer.

Gimana sudah paham?

Kalau gitu, lanjut kita bahas container..

Class Container

Container adalah fondasi dasar dari blok layout. Container berfungsi untuk membungkus blok di dalamnya, sehingga terlihat rapi terhadap ukuran layar.

Container juga memiliki breakpoint.

Ukuran kontainer akan 100% pada breakpoint tertentu. Misalnya, jika kita menggunakan class

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Container</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

  <header>
    <div class="container bg-info text-white">
      <h1>Contoh Container</h1>
    </div>
  </header>

</body>

</html>

6 maka lebar kontainer akan 100% pada layar Extra Small dan Small.

Mari ktia coba dalam contoh:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Container</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

  <header>
    <div class="container bg-info text-white">
      <h1>Contoh Container</h1>
    </div>
  </header>

</body>

</html>

Hasilnya:

Jika class

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Container</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

  <header>
    <div class="container bg-info text-white">
      <h1>Contoh Container</h1>
    </div>
  </header>

</body>

</html>

7 dihapus, maka hasilnya:

Blok header tidak menggunakan

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Container</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

  <header>
    <div class="container bg-info text-white">
      <h1>Contoh Container</h1>
    </div>
  </header>

</body>

</html>

7, sekilas terlihat seperti menggunakan class

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Container</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

  <header>
    <div class="container bg-info text-white">
      <h1>Contoh Container</h1>
    </div>
  </header>

</body>

</html>

9.

Namun, sebenarnya berbeda.

Berikut ini tampilan blok header yang menggunakan class

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Container</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

  <header>
    <div class="container bg-info text-white">
      <h1>Contoh Container</h1>
    </div>
  </header>

</body>

</html>

9.

Class

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Container</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

  <header>
    <div class="container bg-info text-white">
      <h1>Contoh Container</h1>
    </div>
  </header>

</body>

</html>

9 adalah class kontainer yang ukurannya 100% di semua ukruan layar.

Nah, setelah kita mengetahui blok dasar dari layout yakni

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Container</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

  <header>
    <div class="container bg-info text-white">
      <h1>Contoh Container</h1>
    </div>
  </header>

</body>

</html>

7, berikutnya kita akan pelajari class

<div class="row">

</div>

3 dan

<div class="row">

</div>

4.

Class <div class="row"> </div>3 dan <div class="row"> </div>4

Class

<div class="row">

</div>

3 dan

<div class="row">

</div>

4 merupakan class untuk membuat baris dan kolom. Kedua class ini lah yang kita gunakan untuk membuat grid.

Class

<div class="row">

</div>

3 berfungsi untuk membuat baris. Class ini menggunakan

col-[breakpoint]-[ukuran]

0, namun breakpoint tidak berlaku untuk class ini.

Contoh penggunaan:

<div class="row">

</div>

Class

<div class="row">

</div>

4 berfungsi untuk membuat kolom. Class ini harus dibungkus oleh class

<div class="row">

</div>

3 agar menjadi grid.

Class

<div class="row">

</div>

4 memiliki ukuran dan breakpoint. Ukuran paling panjang adalah 12, dan ukuran paling pendek adalah 1.

Format penulisannya:

col-[breakpoint]-[ukuran]

Contoh penggunaan:

<div class="row">
  <div class="col">
    <!-- kolom 1 -->
  </div>
  <div class="col">
    <!-- kolom 2 -->
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <!-- kolom 1 -->
  </div>
</div>

Class Gutter

Gutter adalah jarak antar kolom. Class Gutter ditulis bersamaan dengan class

<div class="row">

</div>

3.

Format penulisannya menggunakan huruf

col-[breakpoint]-[ukuran]

5.

g-[breakpoint]-[ukuran]
gx-[breakpoint]-[ukuran]
gy-[breakpoint]-[ukuran]

Gutter punya ukuran mulai dari

col-[breakpoint]-[ukuran]

6 sampai

col-[breakpoint]-[ukuran]

7.

Class

col-[breakpoint]-[ukuran]

8 adalah Gutter untuk horizontal, sedangkan

col-[breakpoint]-[ukuran]

9 adalah Gutter untuk vertikal. Jika hanya menggunakan

col-[breakpoint]-[ukuran]

5 saja, maka artinya gutter untuk horizontal dan vertikal.

Contoh:

<div class="row g-2">
  <div class="col">
    <!-- kolom 1 -->
  </div>
  <div class="col">
    <!-- kolom 2 -->
  </div>
</div>

Artinya, kita akan memberikan jarak Gutter untuk kolom sebesar

<div class="row">
  <div class="col">
    <!-- kolom 1 -->
  </div>
  <div class="col">
    <!-- kolom 2 -->
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <!-- kolom 1 -->
  </div>
</div>

1.

Contoh lagi:

                                             

an><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contoh Gutter</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="row g-0"> <div class="col-md-3"> <img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam"> </div> <div class="col-md-3"> <img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam"> </div> <div class="col-md-3"> <img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam"> </div> <div class="col-md-3"> <img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam"> </div> <div class="col-md-3"> <img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam"> </div> <div class="col-md-3"> <img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam"> </div> <div class="col-md-3"> <img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam"> </div> <div class="col-md-3"> <img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam"> </div> </div> </div> </body> </html>

Pada contoh ini, kita memberikan nilai gutter

col-[breakpoint]-[ukuran]

6, artinya tidak ada jarak antar kolom.

Hasilnya:

Sekarang coba ubah

<div class="row">
  <div class="col">
    <!-- kolom 1 -->
  </div>
  <div class="col">
    <!-- kolom 2 -->
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <!-- kolom 1 -->
  </div>
</div>

3 menjadi

<div class="row">
  <div class="col">
    <!-- kolom 1 -->
  </div>
  <div class="col">
    <!-- kolom 2 -->
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <!-- kolom 1 -->
  </div>
</div>

4 untuk memberikan jarak sebesar

col-[breakpoint]-[ukuran]

7.

Maka hasilnya:

Latihan: Layout 1 Kolom

Pada latihan ini, kita akan membuat layout 1 kolom dan ada tiga komponen penting yang ada di dalam kolom tersebut, yakni Header, Artikel, dan Footer.

Kurang lebih desainnya seperti ini:

Mari kita buat dengan Bootstrap.

Buatlah satu file dengan nama

<div class="row">
  <div class="col">
    <!-- kolom 1 -->
  </div>
  <div class="col">
    <!-- kolom 2 -->
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <!-- kolom 1 -->
  </div>
</div>

6, kemudian isi dengan kode berikut.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Layout 1 Kolom</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>

    <header class="container bg-primary text-white">
        <div class="row">
            <div class="col-12 py-4 text-center">
                <h1 class="display-1">Tutorial Bootstrap</h1>
                <p class="lead">Panduan Belajar Bootstrap untuk Pemula</p>
            </div>
        </div>
    </header>

    <main class="container border">
        <div class="row">
            <div class="col-12 py-5">
                <h1>Membuat Layout Satu Kolom</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad reprehenderit libero unde ullam ducimus
                    sunt, saepe fugit animi accusamus accusantium excepturi corrupti aut tenetur? Cumque quasi ratione
                    ipsam facere quod?</p>
            </div>
        </div>
    </main>

    <footer class="container bg-light">
        <div class="row">
            <div class="col-12 py-4">
                &copy; 2021 Tutorial Bootstrap
            </div>
        </div>
    </footer>

</body>

</html>

Hasilnya:

Latihan: Layout 2 Kolom

Pada laithan kedua ini, kita akan membagi elemen artikel menjadi dua kolom.

Kolom pertama untuk artikel dan kolom kedua untuk menampilkan informasi lain seperti widget, iklan, dll.

Pada tampilan mobile, kita ingin layout dua kolom ini ditampilkan dalam satu kolom, sedangkan pada desktop tetap ditampilkan dua kolom.

Kira-kira desainnya seperti ini:

Baiklah..

Mari kita coba buat dengan Bootstrap.

Buatlah file baru dengan nama

<div class="row">
  <div class="col">
    <!-- kolom 1 -->
  </div>
  <div class="col">
    <!-- kolom 2 -->
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <!-- kolom 1 -->
  </div>
</div>

7, kemudian isi dengan kode berikut.

<div class="col-12 col-lg-8">
	<!-- ukuran kolom ini 12 pada layar hp -->
  <!-- ukuran kolom ini 8 pada layar komputer -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>

0

Hasilnya:

Latihan: Layout 3 Kolom

Pada latihan ke-3 ini, kita akan membuat tiga kolom untuk tampilan di komputer dan satu kolom di HP.

Berikut ini rancangan desainnya:

Baiklah mari kita buat dalam bootstrap..

Buatlah file baru dengan nama

<div class="row">
  <div class="col">
    <!-- kolom 1 -->
  </div>
  <div class="col">
    <!-- kolom 2 -->
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <!-- kolom 1 -->
  </div>
</div>

8, kemudian isi dengan kode berikut:

<div class="col-12 col-lg-8">
	<!-- ukuran kolom ini 12 pada layar hp -->
  <!-- ukuran kolom ini 8 pada layar komputer -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>

1

Hasilnya:

Latihan: Layout 4 Kolom

Pada latihan ke-4 ini, kita akan membuat 4 kolom untuk menampilkan galeri foto.

PC,Laptop, Tablet: 4 kolom

HP: 3 kolom.

Berikut ini desainnya:

Mari kita buat!

Buatlah file baru dengan nama

<div class="row">
  <div class="col">
    <!-- kolom 1 -->
  </div>
  <div class="col">
    <!-- kolom 2 -->
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <!-- kolom 1 -->
  </div>
</div>

9, kemudian isi dengan kode berikut:

<div class="col-12 col-lg-8">
	<!-- ukuran kolom ini 12 pada layar hp -->
  <!-- ukuran kolom ini 8 pada layar komputer -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>

2

Hasilnya:

Latihan: Challenge!

Jika kamu sudah paham cara membuat layout di Bootstrap, coba tantangan berikut.

Buatlah layout galeri yang mirip seperti layout instagram.

Galeri foto menggunakan tiga kolom. Pada tampilan di HP tidak ada gutter anter foto, sedangkan di desktop ada gutternya.

Selamat mencoba!

Kirimkan hasil karyamu di kolom komentar (bisa screenshoot atau link live demo).

Apa Selanjutnya?

Gimana?

Sistem grid mudah bukan?

Selanjutnya, silahkan terus berlatih dengan studi kasus yang berbeda dan pelajari tutorial Bootstrap berikutnya.

Apa itu grid pada CSS?

Penjelasan CSS Grid Secara sederhana CSS Grid adalah CSS yang dapat membagi kolom pada website menjadi beberapa bagian sesuai yang diinginkan, baik secara horizontal maupun vertikal.

Grid template areas untuk apa?

grid-template-areas digunakan untuk membuat template row & column, menggunakan nilai yang didefinisikan pada property grid-area dalam elemen grid item.

Apa itu grid dalam HTML?

Grid merupakan salah satu properti CSS yang digunakan untuk mengatur layout website. Layaknya Flexbox, Grid mampu membuat layout responsive dan fleksibel. Untuk membuat halaman web yang lebih powerful kita bisa mengkombinasikan kedua konsep ini.

Apa itu grid template Column?

Properti grid-template-columns mengatur jumlah kolom yang akan dibuat dengan mendefinisikan sebuah nilai yang dipisahkan oleh spasi. Artinya di sini kita akan memberikan kolom pertama jatah lebar 66% dan kolom setelahnya sisa lebar yang ada.

kode css