CSS Grid
What is CSS Grid?
- 2-Dimensional Layout
- Perfectly Works With Flexbox
Flexbox v.s Grid
Flex
Grid
Support
Terms
Grid Container
Grid Item
Grid Line
Grid Track
Grid Area
Grid Cell
Grid Cell
Grid Area
Grid Track
Grid Line
CSS Grid Properties
Examples
Case1
wrapper: {
width: '100%',
display: 'grid',
gridTemplateColumns: '200px minmax(50px, 1fr) auto 50px 200px',
gridTemplateRows: '50px 100px repeat(3, 1fr) 100px',
gridTemplateAreas: `
"header header header header header "
"leftBar m m m m"
"leftBar m m m m"
"leftBar m m m m"
"leftBar m m m m"
"footer footer footer footer footer"
`,
},
200px
200px
50px ~1fr
auto
50px
50px
100px
1fr
1fr
1fr
100px
header
header
header
header
header
footer
footer
footer
footer
footer
leftBar
leftBar
leftBar
leftBar
Container
header: {
gridArea: 'header',
backgroundColor: 'lime',
},
leftBar: {
gridArea: 'leftBar',
backgroundColor: 'purple',
},
footer: {
gridArea: 'footer',
backgroundColor: 'green',
},
200px
200px
50px ~1fr
auto
50px
50px
100px
1fr
1fr
1fr
100px
footer
footer
footer
footer
footer
leftBar
leftBar
leftBar
leftBar
Item
m
m
m
m
m
m
m
m
m
m
m
m
m
m
m
m
mainBoard: {
gridArea: 'm',
backgroundColor: 'gray',
margin: 12,
display: 'grid',
alignItems: 'center',
gridColumnGap: 10, // gap
gridRowGap: 10, // gap
gridTemplateColumns: '1fr [line2] 1fr minmax(200px, 1fr) [mainEnd]',
// gridTemplateRows: '1fr 1fr', // overflow items will be hidden
},
item1: {
minHeight: 80,
backgroundColor: 'red',
},
item2: {
height: 60,
backgroundColor: 'rgba(0, 0, 0, 0.7)',
},
Examples
Case2
mainBoard: {
gridArea: 'm',
backgroundColor: 'gray',
margin: 12,
display: 'grid',
gridGap: 20,
gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
},
photo: {
width: 130,
height: 80,
backgroundColor: 'red',
},
mainBoard2: {
gridArea: 'm2',
backgroundColor: 'gray',
margin: 12,
display: 'grid',
gridTemplateRows: 'repeat(3, 1fr)',
gridGap: 10,
gridAutoFlow: 'column', // map item in column
gridAutoColumns: '300px 100px',
},
content: {
backgroundColor: 'yellow',
},
<div style={styles.mainBoard2}>
<div style={styles.content}>1</div>
<div style={styles.content}>2</div>
<div style={styles.content}>3</div>
<div style={styles.content}>4</div>
<div style={styles.content}>5</div>
</div>
CSS Grid
By Travor Lee
CSS Grid
- 187