Skip to main content
Go to Latest
File

.grid-basic { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 30px;}
/* Must work with repeat function */.grid-repeat { display: grid; grid-template-columns: repeat(4, 1fr 2fr); grid-template-rows: repeat(2, auto); grid-gap: 30px;}
/* Complex case */.grid-complex { display: grid; grid-template-columns: 1fr repeat(2, minmax(100px, 200px)) 1fr; grid-template-rows: 100px repeat(2, auto); grid-gap: 30px 5px;}
/* Must work inside media */@media (min-width: 400px) { .grid-media { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 30px; }}
/* Must consider autoflow value */.grid-flow-column { display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; grid-gap: 30px;}
/* Show warning if rows are not defined and dense value is used */.grid-warning-dense { grid-auto-flow: column dense; grid-template-columns: 1fr 1fr 1fr;}
/* Show warning autoflow used without rows/columns */.grid-warning-autoflow { grid-auto-flow: column;}
.grid-autoplace-disabled { /* autoprefixer grid: no-autoplace */ grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 30px;}
.grid-autoplace-gap-warn { grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px;}