codepip’s Grid Garden
A game for learning CSS grid

Solutions

Level 1

grid-column-start: 3;

Level 2

grid-column-start: 5;

Level 3

grid-column-end: 4;

Level 4

grid-column-end: 2;

Level 5

grid-column-end: -2;

Level 6

grid-column-end: -2;

Level 7

grid-column-end: span 2;

Level 8

grid-column-end: span 5;

Level 9

grid-column-start: span 3;

Level 10

grid-column: 4 / 6;

Level 11

grid-column: 2 / span 3;

Level 12

grid-row-start: 3;

Level 13

grid-row: 3 / 6;

Level 14

grid-column: 2;
grid-row: 5;

Level 15

grid-column: 2 / span 4;
grid-row: 1 / -1;

Level 16

grid-area: 1 / 2 / span 3 / -1;

Level 17

grid-area: 2 / 3 / 5 / 6;

Level 18

order: 1;

Level 19

order: -1;

Level 20

grid-template-columns: 50%;

Level 21

grid-template-columns: repeat(8, 12.5%);

Level 22

grid-template-columns: 100px 3em 40%;

Level 23

grid-template-columns: 1fr 5fr;

Level 24

grid-template-columns: 50px repeat(3, 1fr) 50px;

Level 25

grid-template-columns: 75px 3fr 2fr;

Level 26

grid-template-rows: repeat(4, 12.5px) 1fr;

Level 27

grid-template: 60% 1fr / 200px 1fr;

Level 28

grid-template: 1fr 50px / 20% 1fr;