Rengga Dev – Great tutorial from Alex Trost (based on some demos, like this one, from Andy Barefoot) showcasing how, while CSS grid has straight grid lines across and down, you can place items across grid lines creating a staggered effect that looks pretty rad. Grid-like, but it appears to align to diagonal lines rather than horizontal and vertical lines because of the staggering. And you still get all the flexibility of grid!
Responsive Book Grid
Before we get into the technical aspects of this pen, I want to pause and appreciate this piece’s brilliant design. The shapes and color combinations are excellent, and he’s chosen some gorgeous book covers that add to the quality feel.
Here’s the actual pen in action.
:root {
--columns: 3;
--yellow: rgba(238, 188, 31, 1);
--pink: rgba(255, 82, 145, 1);
--blue: rgba(64, 98, 187, 1);
--green: rgba(6, 141, 126, 1);
--white: rgba(248, 255, 229, 1);
}
body{
background-color: #182028;
}
ul{
display:grid;
grid-template-columns: repeat(var(--columns),1fr);
margin: 200px -40px;
}
li{
grid-column-end: span 2;
position: relative;
width: 100%;
padding-bottom: 100%;
margin-top: -50%;
}
li:nth-child(2n){
grid-column-start:2;
}
li::before, li::after {
content:'';
position: absolute;
display: block;
width: 100%;
height: 100%;
background-size: 50% 100%,50% 100%;
background-position: left, right;
}
li::before{
z-index: -10;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
background-repeat: no-repeat;
background-image: linear-gradient(-45deg,var(--yellow) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--yellow) 60%), linear-gradient(45deg,var(--yellow) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--yellow) 60%);
}
li::after{
clip-path: polygon(100% 50%, 50% 100%, 0 50%, 20% 50%, 50% 80%,80% 50%);
-webkit-clip-path: polygon(100% 50%, 50% 100%, 0 50%, 20% 50%, 50% 80%,80% 50%);
background-repeat: no-repeat;
background-image: linear-gradient(45deg,var(--yellow) 40%,var(--green) 40%), linear-gradient(-45deg,var(--yellow) 40%,var(--green) 40%);
}
li:nth-child(2n)::before{
background-image: linear-gradient(-45deg,var(--pink) 53.5%,var(--blue) 53.5%,var(--blue) 60%,var(--pink) 60%), linear-gradient(45deg,var(--pink) 53.5%,var(--blue) 53.5%,var(--blue) 60%,var(--pink) 60%);
}
li:nth-child(2n)::after{
background-image: linear-gradient(45deg,var(--pink) 40%,var(--blue) 40%), linear-gradient(-45deg,var(--pink) 40%,var(--blue) 40%);
}
li:nth-child(5n)::before{
background-image: linear-gradient(-45deg,var(--green) 53.5%,var(--pink) 53.5%,var(--pink) 60%,var(--green) 60%), linear-gradient(45deg,var(--green) 53.5%,var(--pink) 53.5%,var(--pink) 60%,var(--green) 60%);
}
li:nth-child(5n)::after{
background-image: linear-gradient(45deg,var(--green) 40%,var(--pink) 40%), linear-gradient(-45deg,var(--green) 40%,var(--pink) 40%);
}
li:nth-child(7n)::before,li:nth-child(7n-4)::before{
background-image: linear-gradient(-45deg,var(--blue) 53.5%,var(--white) 53.5%,var(--white) 60%,var(--blue) 60%), linear-gradient(45deg,var(--blue) 53.5%,var(--white) 53.5%,var(--white) 60%,var(--blue) 60%);
}
li:nth-child(7n)::after,li:nth-child(7n-4)::after{
background-image: linear-gradient(45deg,var(--blue) 40%,var(--white) 40%), linear-gradient(-45deg,var(--blue) 40%,var(--white) 40%);
}
li:nth-child(9n)::before,li:nth-child(9n-5)::before{
background-image: linear-gradient(-45deg,var(--white) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--white) 60%), linear-gradient(45deg,var(--white) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--white) 60%);
}
li:nth-child(9n)::after,li:nth-child(9n-5)::after{
background-image: linear-gradient(45deg,var(--white) 40%,var(--green) 40%), linear-gradient(-45deg,var(--white) 40%,var(--green) 40%);
}
img{
position: absolute;
width: 43%;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-60%);
box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3);
transition-property: transform;
transition-duration: .3s;
}
img:hover{
transform: translateX(-40%) translateY(-70%) rotatez(25deg);
}
@media (min-width:450px){
ul{
margin: 190px 40px;
}
}
@media (min-width:600px){
:root {
--columns: 5;
}
li:nth-child(2n){
grid-column-start:auto;
}
li:nth-child(4n-1){
grid-column-start:2;
}
}
@media (min-width:900px){
:root {
--columns: 7;
}
li:nth-child(4n-1){
grid-column-start:auto;
}
li:nth-child(6n-2){
grid-column-start:2;
}
}
@media (min-width:1200px){
:root {
--columns: 9;
}
li:nth-child(6n-2){
grid-column-start:auto;
}
li:nth-child(8n-3){
grid-column-start:2;
}
}
@media (min-width:1500px){
:root {
--columns: 11;
}
li:nth-child(8n-3){
grid-column-start:auto;
}
li:nth-child(10n-4){
grid-column-start:2;
}
}
@media (min-width:1800px){
:root {
--columns: 13;
}
li:nth-child(10n-4){
grid-column-start:auto;
}
li:nth-child(12n-5){
grid-column-start:2;
}
}
@media (min-width:2100px){
:root {
--columns: 15;
}
li:nth-child(12n-5){
grid-column-start:auto;
}
li:nth-child(14n-6){
grid-column-start:2;
}
}
We’ll break down these techniques:
- How he sets up the grid
- How he fits the diamonds together
- How he makes the diamond shapes
Fitting the Shapes together
So we see how the grid is set up, but how does he fit them perfectly together like this?
Two steps:
- Shift every other row so that it starts in the second column with
grid-column-start: 2. - Set
margin-top: -50%on all list items to move them up by half their height.
Here’s a demo to see it in action.
You can see how Andy takes the grid of diamonds and shifts them to fit snugly together. The white dotted line outlines each grid item, so you can see how they overlap one another.
Making the Shapes
Now that we know how Andy’s arranging the shapes let’s talk about how he’s creating them. He’s making the shape behind the book with the li:before pseudo element, and the V shape at the bottom with the li:after element. Hover over this demo to separate the pieces.
Isometric Shoe Display
Someone else might make a joke about a man named Barefoot making a gallery of shoes, but I’m far too mature for puns.
Once again, Andy comes up with a brilliant way to display products on the web.
The cubes might make it difficult to tell how he’s pulling this one off, so let’s add some borders to the elements.
Wrap Up
We checked out three awesome pieces that all use CSS Grid in novel ways. By staggering the starting column, or skewing the entire grid, you can get some pretty fantastic results. I’m excited to see the new ways developers utilize CSS Grid as it gets implemented on more and more production sites.
