CSS Grid Generator

ກຳນົດຖັນ, ແຖວ ແລະຊ່ອງຫວ່າງດ້ວຍສາຍຕາ, ຈາກນັ້ນສຳເນົາລະຫັດແມ່ແບບ CSS Grid ສຳລັບໂຄງຮ່າງຂອງທ່ານ.

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

ກຳນົດຖັນ, ແຖວ ແລະຊ່ອງຫວ່າງດ້ວຍສາຍຕາ, ຈາກນັ້ນສຳເນົາລະຫັດແມ່ແບບ CSS Grid.
ແລ່ນຢູ່ໃນຕົວທ່ອງເວັບຂອງທ່ານ
ໃຊ້ຟຣີ

ວິທີການນໍາໃຊ້

ກໍານົດການນັບຖັນ ແລະແຖວ.
ປັບຊ່ອງຫວ່າງ ແລະຕິດຕາມຂະໜາດ.
ຄັດລອກຕາຕະລາງ CSS.

How this tool works

ກໍານົດການນັບຖັນ ແລະແຖວ.
ປັບຊ່ອງຫວ່າງ ແລະຕິດຕາມຂະໜາດ.
ຄັດລອກຕາຕະລາງ CSS.

Recommended settings

ໃຊ້ຕົວເລືອກເລີ່ມຕົ້ນກ່ອນ, ຈາກນັ້ນປັບປ່ຽນຖ້າຈໍາເປັນ

Supported formats

Text / on-page input

File size and limits

ການເບິ່ງຕົວຢ່າງຫຼາຍຊັ້ນທີ່ສັບສົນຫຼາຍອາດຈະຮູ້ສຶກຊ້າກວ່າໃນໂທລະສັບລຸ້ນເກົ່າ.

Privacy

ເຄື່ອງກໍາເນີດສີ & CSS ເຮັດວຽກທັງຫມົດໃນຕົວທ່ອງເວັບຂອງທ່ານ. ການເບິ່ງຕົວຢ່າງແລະການແປງບໍ່ເຄີຍອັບໂຫລດຮູບແບບຂອງທ່ານ.

Common use cases

ໃຊ້ CSS Grid Generator ທຸກຄັ້ງທີ່ທ່ານຕ້ອງການ: ກຳນົດຖັນ, ແຖວ ແລະຊ່ອງຫວ່າງດ້ວຍສາຍຕາ, ຈາກນັ້ນຄັດລອກລະຫັດແມ່ແບບ CSS Grid.

Troubleshooting

ຕົວຢ່າງຈະແຕກຕ່າງກັນຫຼັງຈາກວາງ

ກວດເບິ່ງ CSS ທີ່ມີການແຂ່ງຂັນຢູ່ໃນຫນ້າຂອງທ່ານ (ຣີເຊັດ, ສີທີ່ສືບທອດ). ສຳເນົາກົດລະບຽບທີ່ສ້າງຂຶ້ນໃສ່ແຜ່ນສະໄຕລ໌ທີ່ໂດດດ່ຽວກ່ອນ.

FAQ

ນີ້ອັບໂຫລດ CSS ຂອງຂ້ອຍບໍ?

ບໍ່. ເຄື່ອງສ້າງ ແລະຕົວແປງສັນຍານແລ່ນຢູ່ໃນບຣາວເຊີຂອງທ່ານດ້ວຍການເບິ່ງຕົວຢ່າງສົດໆ.

ຂ້ອຍຕ້ອງການບັນຊີບໍ?

ບໍ່. ເປີດເຄື່ອງມື, tweak ການຄວບຄຸມ, ແລະຄັດລອກ CSS.

CSS Grid Generator