Cara menggunakan membuat kolom dengan css

Table of Contents Show

Cara Membuat 2 Column Layout Grid
Apa itu grid di CSS?
Apa itu div class Container?
Apa itu grid dalam HTML?

Cari disini...
Browse
- Katalog Kelas
  Ikuti materi yang kamu butuhkan
- Roadmap
  Belajar online dengan terarah
- Bootcamp
  Codepolitan x Catamyst
Explore
- Tutorial & Artikel
  Temukan Artikel menarik
- Podcast
  Podcast seputar pemrograman
- Webinar
  Ikuti Berbagai Webinar
- Event
  Temukan Event menarik
- Beasiswa
  Program Beasiswa
- Discord
  Komunitas Discord
- Forum
  Diskusi antar Programmer
- Leaderboard
  Ranking siswa Codepolitan
Partnership
- For Company
  Solusi tepat untuk perusahaan
- For School
  Kerjasama untuk sekolah
- For Campus
  Kerjasama untuk kampus
- For Mentor
  Peluang penghasilan untuk mentor
Career

LoginRegister

Di bawah ini kita akan mempelajari cara membuat2 Column Layout Grid dengan CSS.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Buat dua kolom yang sama yang mengapung di samping satu sama lain */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Hanya untuk demonstrasi */
}

/* Hapus floats setelah  columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Dua Kolom Sama</h2>

<div class="row">
  <div class="column" style="background-color:#8FBC8F;">
    <h2>Kolom 1</h2>
    <p>contoh teks....</p>
  </div>
  <div class="column" style="background-color:#2F4F4F;">
    <h2>Kolom 2</h2>
    <p>contoh teks....</p>
  </div>
</div>

</body>
</html>

Cara Membuat 2 Column Layout Grid

Langkah 1) Tambahkan HTML:
Contoh

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

Langkah 2) Tambahkan CSS:
Dalam contoh ini, kita akan membuat dua kolom yang sama:

Contoh Float

.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Buat dua kolom yang sama yang mengapung(float) di samping satu sama lain */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Hanya untuk contoh */
}

/* hapus floats setelah columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Two Equal Columns</h2>

<h2>Dua Kolom Sama</h2>

<div class="row">
  <div class="column" style="background-color:#8FBC8F;">
    <h2>Kolom 1</h2>
    <p>contoh teks....</p>
  </div>
  <div class="column" style="background-color:#2F4F4F;">
    <h2>Kolom 2</h2>
    <p>contoh teks....</p>
  </div>
</div>

</body>
</html>

Cara modern untuk membuat dua kolom, adalah dengan menggunakan CSS Flexbox. Namun, ini tidak didukung di Internet Explorer 10 dan versi sebelumnya.

Contoh Flexbox

.row {
  display: flex;
}

.column {
  flex: 50%;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Buat dua kolom yang sama yang terletak di samping satu sama lain */
.column {
  flex: 50%;
  padding: 10px;
  height: 300px; /* Hanya untuk contoh */
}
</style>
</head>
<body>

<h2>Two Equal Columns</h2>

<h2>Dua Kolom Sama</h2>

<div class="row">
  <div class="column" style="background-color:#8FBC8F;">
    <h2>Kolom 1</h2>
    <p>contoh teks....</p>
  </div>
  <div class="column" style="background-color:#2F4F4F;">
    <h2>Kolom 2</h2>
    <p>contoh teks....</p>
  </div>
</div>

</body>
</html>

Kita bisa menggunakan yang mana saja untuk membuat 2 kolom layout grid. Namun jika menggunakan browser IE10 atau yang lebih lama, maka harus gunakan cara float.

Di bawah ini ada contoh yang membuat kolom tidak sama :

Contoh

.column {
  float: left;
}

.left {
  width: 25%;
}

.right {
  width: 75%;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Buat dua kolom tidak sama yang mengapung di samping satu sama lain */
.column {
  float: left;
  padding: 10px;
  height: 300px; /* Hanya untuk contoh*/
}

.left {
  width: 25%;
}

.right {
  width: 75%;
}

/* Hapus floats setelah columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Two Equal Columns</h2>

<h2>Dua Kolom Sama</h2>

<div class="row">
  <div class="column" style="background-color:#8FBC8F;">
    <h2>Kolom 1</h2>
    <p>contoh teks....</p>
  </div>
  <div class="column" style="background-color:#2F4F4F;">
    <h2>Kolom 2</h2>
    <p>contoh teks....</p>
  </div>
</div>

</body>
</html>

Dalam contoh ini, kita juga akan membuat dua kolom layout yang responsif:

Contoh

/* Responsive layout - ketika layar kurang dari 600px lebarnya, buat dua kolom bertumpuk satu sama lain, bukan di samping satu sama lain */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Buat dua kolom yang sama yang mengapung di samping satu sama lain */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Hanya untuk contoh */
}

/* Hapus floats setelah columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - membuat dua kolom bertumpuk satu sama lain, bukan di samping satu sama lain */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Contoh Responsive Two Column Layout</h2>
<p>Ubah ukuran jendela browser untuk melihat efek responsif (kolom akan menumpuk satu sama lain alih-alih mengambang berdampingan, saat layar kurang dari 600 piksel lebar).</p>

<div class="row">
  <div class="column" style="background-color:#8FBC8F;">
    <h2>Kolom 1</h2>
    <p>contoh teks....</p>
  </div>
  <div class="column" style="background-color:#2F4F4F;">
    <h2>Kolom 2</h2>
    <p>contoh teks....</p>
  </div>
</div>

</body>
</html>

Apa itu grid di 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. Penggunaan CSS Grid bertujuan untuk mempermudah developer untuk membuat layout dari design yang telah dibuat.

Apa itu div class Container?

Div adalah salah satu elemen pada HTML yang berguna untuk membuat sebuah container atau wadah elemen dan memudahkan untuk mengelompokan elemen pada HTML.

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.