ಉಚಿತ ಪರಿವರ್ತಕ
CSS ಗ್ರಿಡ್ ಲೇಔಟ್ ಜನರೇಟರ್
ಲೈವ್ ಪೂರ್ವವೀಕ್ಷಣೆಯೊಂದಿಗೆ CSS ಗ್ರಿಡ್ ಲೇಔಟ್ಗಳನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ರಚಿಸಿ. ಗ್ರಿಡ್-ಟೆಂಪ್ಲೇಟ್-ಕಾಲಮ್ಗಳು, ಸಾಲುಗಳು, ಅಂತರ, ಸಮರ್ಥನೆ-ಐಟಂಗಳು, ಅಲೈನ್-ಐಟಂಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳನ್ನು ಹೊಂದಿಸಿ - ಉಚಿತ ಮತ್ತು ಕ್ಲೈಂಟ್-ಸೈಡ್.
ಲೈವ್ ಪೂರ್ವವೀಕ್ಷಣೆ
1
2
3
4
5
6
ಕಾಲಮ್ಗಳು (repeat(3, 1fr))
ಸಾಲುಗಳು (repeat(2, 1fr))
ಕಾಲಮ್-ಅಂತರ (12px)
0px16px32px
ಸಾಲು-ಅಂತರ (12px)
0px16px32px
ಸಮರ್ಥನೆ-ಐಟಂಗಳು
ಐಟಂಗಳನ್ನು ಜೋಡಿಸಿ
ಸಿಎಸ್ಎಸ್ ಔಟ್ಪುಟ್
.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;
}