મફત કન્વર્ટર
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;
}