मोफत कनवर्टर
CSS ग्रिड लेआउट जनरेटर
थेट पूर्वावलोकनासह CSS ग्रिड लेआउट दृश्यमानपणे व्युत्पन्न करा. ग्रिड-टेम्प्लेट-स्तंभ, पंक्ती, अंतर, न्याय्य-आयटम, संरेखित-आयटम आणि बरेच काही समायोजित करा — विनामूल्य आणि क्लायंट-साइड.
थेट पूर्वावलोकन
1
2
3
4
5
6
स्तंभ (repeat(3, 1fr))
पंक्ती (repeat(2, 1fr))
स्तंभ-अंतर (12px)
0px16px32px
पंक्ती अंतर (12px)
0px16px32px
औचित्य-वस्तू
संरेखित-आयटम
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;
}