Quay lại
CSS Grid Generator

Explicit Grid

grid-template-columns
grid-template-rows
row-gap
column-gap
1
2
34
1
2
34
1fr
1fr
1fr
1fr
1fr
1fr

Kéo chuột qua các ô để tạo area · Click ô có tên để đổi tên

HTML
<div class="container">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
  <div class="item-4"></div>
  <div class="item-5"></div>
  <div class="item-6"></div>
  <div class="item-7"></div>
  <div class="item-8"></div>
  <div class="item-9"></div>
</div>
CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0px 0px;
}
CSS Grid Generator•CodeSense AI