graphene.css

break out of the grid

.container {

display: block;

}

.container

.row {

display: flex;

}

.container

.row

.col-* {

width: calc(100% / 12 * X);

}

.container

.row

.col-1

.col-11

.row

.col-2

.col-10

.row

.col-3

.col-9

.row

.col-4

.col-8

.row

.col-5

.col-7

.row

.col-6

.col-6

.row

.col-4

.col-4

.col-4

.row

.col-3

.col-3

.col-3

.col-3

.row

.col-2

.col-2

.col-2

.col-2

.col-2

.col-2

.row

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.row

.col-12

.row
.gutters {

width: calc(98% / 12 * X);
margin-left: 2%;

}

.col-1

.col-11

.col-2

.col-10

.col-3

.col-9

.col-4

.col-8

.col-5

.col-7

.col-6

.col-6

.col-4

.col-4

.col-4

.col-3

.col-3

.col-3

.col-3

.col-2

.col-2

.col-2

.col-2

.col-2

.col-2

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-12

.col-*
.break-* {

margin-left: calc(100% / 12 * -X);

}

.col-2

.break-1

.col-3

.break-2

.col-4

.break-3

.col-5

.break-4

.col-6

.break-5

.col-7

.break-6

.col-8

.break-7

.col-9

.break-8

.col-10

.break-9

.col-11

.break-10

.col-*
.push-* {

margin-left: calc(100% / 12 * X);

}

.push-1

.push-2

.push-3

.push-4

.push-5

.push-6

.push-7

.push-8

.push-9

.push-10

.push-11

.hi-* {

height: calc(100vh / 12 * X);

}

.hi-1

.hi-11

.hi-2

.hi-10

.hi-3

.hi-9

.hi-4

.hi-8

.hi-5

.hi-7

.hi-6

.hi-6

.hi-4

.hi-4

.hi-4

.hi-3

.hi-3

.hi-3

.hi-3

.hi-2

.hi-2

.hi-2

.hi-2

.hi-2

.hi-2

.hi-1

.hi-1

.hi-1

.hi-1

.hi-1

.hi-1

.hi-1

.hi-1

.hi-1

.hi-1

.hi-1

.hi-1

.hi-12

.hi-*
.break-* {

margin-top: calc(100vh / 12 * -X);

}

.hi-2

.break-1

.hi-3

.break-2

.hi-4

.break-3

.hi-5

.break-4

.hi-6

.break-5

.hi-7

.break-6

.hi-8

.break-7

.hi-9

.break-8

.hi-10

.break-9

.hi-11

.break-10

.hi-12

.break-11