ເລີ່ມຕົ້ນຈັດ Grid Layout ໃນ CSS ໃຫ້ເປ໊ະ ແລະ ງ່າຍດາຍດ້ວຍ CSS Grid

ບົດນໍາ

ຫຼັງຈາກທີ່ເຮົາໄດ້ຮຽນຮູ້ CSS Flexbox ໄປແລ້ວ ເຊິ່ງເໝາະສໍາລັບການຈັດ Layout ແນວໃດແນວໜຶ່ງ (1D Layout), ເມື່ອເວັບໄຊຂອງທ່ານມີໂຄງສ້າງທີ່ຊັບຊ້ອນຂຶ້ນ ເຊັ່ນ: ມີ Dashboard, Gallery, ຫຼື ໜ້າຂ່າວສານທີ່ມີຫຼາຍ Column ແລະ Row ພ້ອມກັນ. ການໃຊ້ Flexbox ຊ້ອນກັນຫຼາຍໆຊັ້ນອາດຈະເຮັດໃຫ້ Code ເບິ່ງຍາກ.

ບົດຄວາມນີ້ຈະພາທ່ານມາຮູ້ຈັກກັບ CSS Grid ເຊິ່ງເປັນ Layout System ແບບ 2 ມິຕິ (2D Layout) ທີ່ຖືກອອກແບບມາເພື່ອຈັດການກັບທັງ ແນວນອນ (Rows) ແລະ ແນວຕັ້ງ (Columns) ໄປພ້ອມໆກັນ. ມັນຈະຊ່ວຍໃຫ້ທ່ານສາມາດສ້າງໂຄງສ້າງໜ້າເວັບໄຊທີ່ຊັບຊ້ອນໄດ້ຢ່າງງ່າຍດາຍ ແລະ ເປັນລະບຽບ.

ແນວຄວາມຄິດຫຼັກຂອງ CSS Grid

ເພື່ອໃຫ້ເຂົ້າໃຈການເຮັດວຽກຂອງ CSS Grid, ເຮົາຕ້ອງຮູ້ຈັກສ່ວນປະກອບພື້ນຖານດັ່ງນີ້:

1. Grid Container: ພໍ່/ແມ່ ທີ່ຖືກກໍານົດຄໍາສັ່ງ display: grid; ເພື່ອເປີດໃຊ້ງານ Grid System.
2. Grid Item: ລູກໆ ທີ່ຢູ່ທາງໃນ Container ເຊິ່ງຈະຖືກຈັດວາງລົງໃນຕາຕະລາງຕາມທີ່ເຮົາກໍານົດ.
3. Grid Lines: ເສັ້ນແບ່ງຕາຕະລາງທັງແນວນອນ ແລະ ແນວຕັ້ງ ທີ່ໃຊ້ຮ່າງຂອບເຂດ (ເລີ່ມຕົ້ນນັບຈາກເສັ້ນທີ 1 ເປັນຕົ້ນໄປ).
4. Grid Track: ພື້ນທີ່ລະຫວ່າງເສັ້ນ 2 ເສັ້ນທີ່ຢູ່ຕິດກັນ (ໝາຍເຖິງ Row 1 ແຖວ ຫຼື Column 1 ແຖວ).

Property ທີ່ສໍາຄັນໃນ CSS Grid

1. ການກໍານົດ Column ແລະ Row

ເຮົາໃຊ້ grid-template-columns ແລະ grid-template-rows ເພື່ອກໍານົດຂະໜາດ ແລະ ຈໍານວນຂອງ Column ແລະ Row.

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 Column: ຂະໜາດຄົງທີ່ 1 ແລະ ຂະໜາດຢືດຢຸ່ນ 2 */
  grid-template-rows: 100px auto;        /* 2 Row: ແຖວທໍາອິດ 100px, ແຖວທີສອງອໍໂຕ້ */
}

ໝາຍເຫດ: ຫົວໜ່ວຍ fr (Fraction) ເປັນຫົວໜ່ວຍໃໝ່ໃນ Grid ທີ່ໃຊ້ແບ່ງສັດສ່ວນພື້ນທີ່ຫວ່າງທີ່ເຫຼືອຢູ່ຢ່າງຍຸຕິທໍາ.

2. grid-gap ຫຼື gap (ການສ້າງໄລຍະຫ່າງ)

ເຮົາສາມາດສ້າງໄລຍະຫ່າງລະຫວ່າງຊ່ອງຕາຕະລາງໄດ້ງ່າຍໆ ໂດຍບໍ່ຕ້ອງໃຊ້ margin:

.grid-container {
  display: grid;
  gap: 20px; /* ສ້າງໄລຍະຫ່າງທັງແນວນອນ ແລະ ແນວຕັ້ງ 20px */
}

3. repeat() ແລະ minmax()

ເພື່ອຫຼຸດຜ່ອນການຂຽນ Code ຊໍ້າໆ, ເຮົາສາມາດໃຊ້ Function ຊ່ວຍເຫຼົ່ານີ້ໄດ້:

• repeat(3, 1fr): ມີຄ່າເທົ່າກັບ 1fr 1fr 1fr
• minmax(200px, 1fr): ກໍານົດຂະໜາດຕໍ່າສຸດ 200px ແລະ ຂະໜາດສູງສຸດຕາມພື້ນທີ່ເຫຼືອ

ຕົວຢ່າງການນໍາໃຊ້ຈິງ (Code Example)

1. ການສ້າງ Photo Gallery / Card Layout ແບບ Responsive

ຕົວຢ່າງນີ້ຈະສ້າງ Card Layout ທີ່ປັບຈໍານວນ Column ອັດໂນມັດຕາມຂະໜາດໜ້າຈໍ ໂດຍບໍ່ຕ້ອງຂຽນ @media query ເລີຍ!

<div class="gallery">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

.gallery {
  display: grid;
  /* ປັບ Column ອັດໂນມັດ ໂດຍແຕ່ລະ Card ມີຂະໜາດຢ່າງນ້ອຍ 250px */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

2. ການຈັດ ໂຄງສ້າງເວັບໄຊ (Web Layout) ດ້ວຍ grid-template-areas

ວິທີນີ້ຊ່ວຍໃຫ້ເຮົາຈັດ Layout ໄດ້ເຫັນພາບຊັດເຈນທີ່ສຸດ ເໝືອນການແຕ້ມໂຄງຮ່າງໜ້າເວັບ:

.website-container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

/* ກໍານົດ Area ໃຫ້ແຕ່ລະ Element */
.header  { grid-area: header; background: #2c3e50; color: white; }
.sidebar { grid-area: sidebar; background: #ecf0f1; }
.main    { grid-area: main; padding: 20px; }
.footer  { grid-area: footer; background: #34495e; color: white; }

ເມື່ອໃດຄວນໃຊ້ Flexbox vs CSS Grid?

CSS Flexbox

• ມິຕິ (Dimensions): 1 ມິຕິ (ສາມາດຈັດໄດ້ພຽງແຕ່ ແນວນອນ ຫຼື ແນວຕັ້ງ ໃນເວລາດຽວກັນ)
• ການເນັ້ນ (Focus): ເນັ້ນການຈັດ Content ທີ່ຢູ່ທາງໃນຂອງກ່ອງ
• ກໍລະນີທີ່ເໝາະສົມ: Navigation bar, ປຸ່ມຕ່າງໆ, Form inputs, ແລະ ການເຮັດ List

CSS Grid

• ມິຕິ (Dimensions): 2 ມິຕິ (ສາມາດຈັດໄດ້ທັງ ແນວນອນ ແລະ ແນວຕັ້ງ ພ້ອມກັນ)
• ການເນັ້ນ (Focus): ເນັ້ນການຈັດໂຄງສ້າງ (Layout) ພາບລວມທີ່ຢູ່ພາຍນອກ
• ກໍລະນີທີ່ເໝາະສົມ: Dashboard, Web layout ຫຼັກຂອງໜ້າເວັບ, ແລະ Photo gallery

Pro Tip: ທ່ານບໍ່ຈໍາເປັນຕ້ອງເລືອກຢ່າງໃດຢ່າງໜຶ່ງ! ມືອາຊີບມັກໃຊ້ CSS Grid ໃນການຈັດ ໂຄງສ້າງໃຫຍ່ຂອງໜ້າເວັບ, ແລ້ວໃຊ້ Flexbox ໃນການຈັດ element ນ້ອຍໆ ທີ່ຢູ່ພາຍໃນ Grid Item ອີກເທື່ອໜຶ່ງ.

ສະຫຼຸບ

CSS Grid ເປັນເຄື່ອງມືຈັດ Layout ທີ່ຊົງພະລັງ ແລະ ຊ່ວຍປະຢັດເວລາໃນການຂຽນ CSS ໄດ້ຢ່າງມະຫາສານ. ມັນຊ່ວຍໃຫ້ເຮົາສາມາດສ້າງໜ້າເວັບໄຊທີ່ເປັນລະບຽບ, ເບິ່ງງ່າຍ, ແລະ ເຮັດ Responsive ໄດ້ຢ່າງມີປະສິດທິພາບ.