ເຂົ້າໃຈ CSS Grid ພື້ນຖານພາຍໃນ 10 ນາທີ
LaoCourse Team••1 ນາທີອ່ານ
ບົດນໍາ
CSS Grid ເປັນລະບົບຈັດວາງ Layout ແບບ 2 ມິຕິ (ແຖວ ແລະ ຖັນພ້ອມກັນ) ທີ່ຊ່ວຍໃຫ້ການອອກແບບໜ້າເວັບງ່າຍຂຶ້ນຫຼາຍ ທຽບກັບ Flexbox ທີ່ເໝາະສໍາລັບ 1 ມິຕິເທົ່ານັ້ນ
ຕົວຢ່າງພື້ນຖານ
ລອງໃສ່ Code Block ນີ້ (ກົດປຸ່ມ <> ໃນແຖບເຄື່ອງມືເທິງ Editor ເພື່ອສ້າງ Code Block):
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}ຂໍ້ດີຂອງ CSS Grid
- ຈັດວາງໄດ້ທັງແຖວ ແລະ ຖັນພ້ອມກັນ
- ຫຼຸດການໃຊ້ Div ຊ້ອນກັນຫຼາຍຊັ້ນ
- Responsive Design ງ່າຍຂຶ້ນດ້ວຍ
repeat()ແລະminmax()
ສະຫຼຸບ
CSS Grid ຄືເຄື່ອງມືສໍາຄັນທີ່ນັກພັດທະນາ Frontend ຄວນຮູ້ຈັກໄວ້ຄູ່ກັບ Flexbox
