Flex
Grid
Grid Container
Grid Item
Grid Line
Grid Track
Grid Area
Grid Cell
Grid Cell
Grid Area
Grid Track
Grid Line
CSS Grid Properties
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)',
},
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>