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