Kisi-kisi Tile dalam CSS

Mari kita beralih ke pekerjaan praktis dengan sistem grid dan buat tile dengan jarak yang berbeda.

Tile dari 9 Blok, 3 per Baris Tanpa Jarak

Mari buat tabel dari sembilan elemen dan tempatkan dalam tiga kolom:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  height: 100px;
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Tile dari 9 Blok, 3 per Baris dengan Jarak

Sekarang terapkan properti grid-gap untuk membuat jarak antara elemen:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  height: 100px;
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Tile dari 9 Blok, 3 per Baris dengan Jarak Hanya di Antara Blok

Dan sekarang mari atur jarak hanya di antara blok dalam grid:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  border: 2px solid #696989;
  width: 600px;
}
#parent > div {
  height: 100px;
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Tile dari 8 Blok, 3 per Baris dengan Blok yang Hilang

Mari buat tile di mana baris terbawah kehilangan satu blok:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  border: 2px solid #696989;
  width: 600px;
}
#parent > div {
  height: 100px;
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Tugas Praktis