CSS ഗ്രിഡ് ലേഔട്ട് ജനറേറ്റർ
തത്സമയ പ്രിവ്യൂ ഉപയോഗിച്ച് ദൃശ്യപരമായി CSS ഗ്രിഡ് ലേഔട്ടുകൾ സൃഷ്ടിക്കുക. ഗ്രിഡ്-ടെംപ്ലേറ്റ്-നിരകൾ, വരികൾ, വിടവ്, ന്യായീകരിക്കുക-ഇനങ്ങൾ, വിന്യസിക്കുക-ഇനങ്ങൾ എന്നിവയും അതിലേറെയും - സ്വതന്ത്രവും ക്ലയൻ്റ് വശവും ക്രമീകരിക്കുക.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
column-gap: 12px;
row-gap: 12px;
justify-items: stretch;
align-items: stretch;
}
.item {
padding: 1rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
text-align: center;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}