CodePen Embed - CSS Grids and Background Patterns

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Patterns and Grids</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="pattern-container">
        <!-- HORIZTONAL STRIPES -->
        <div class="stripes--horizontal"></div>
        <div class="stripes--horizontal--2"></div>
        <div class="stripes--horizontal--3"></div>
        <div class="stripes--horizontal--4"></div>
        <div class="stripes--horizontal--5"></div>
        <div class="stripes--horizontal--6"></div>
        <div class="stripes--horizontal--7"></div>
        <div class="stripes--horizontal--8"></div>
        <div class="stripes--horizontal--9"></div>
        <div class="stripes--horizontal--10"></div>
        <!-- VERTICAL STRIPES -->
        <div class="stripes--vertical"></div>
        <div class="stripes--vertical--2"></div>
        <div class="stripes--vertical--3"></div>
        <div class="stripes--vertical--4"></div>
        <div class="stripes--vertical--5"></div>
        <!-- HOUNDS TOOTH -->
        <div class="hounds-tooth"></div>
        <div class="hounds-tooth--2"></div>
        <div class="hounds-tooth--3"></div>
        <div class="hounds-tooth--4"></div>
        <div class="hounds-tooth--5"></div>
        <!-- DIAGONAL STRIPES -->
        <div class="stripes--diagonal"></div>
        <div class="stripes--diagonal--2"></div>
        <div class="stripes--diagonal--3"></div>
        <div class="stripes--diagonal--4"></div>
        <div class="stripes--diagonal--5"></div>
        <div class="stripes--diagonal--6"></div>
        <div class="stripes--diagonal--7"></div>
        <div class="stripes--diagonal--8"></div>
        <div class="stripes--diagonal--9"></div>
        <div class="stripes--diagonal--10"></div>
        <!-- BIG CHECKERBOARD -->
        <div class="checkerboard--big"></div>
        <div class="checkerboard--big--2"></div>
        <div class="checkerboard--big--3"></div>
        <div class="checkerboard--big--4"></div>
        <div class="checkerboard--big--5"></div>

    </div>
    
</body>
</html>

$black: #222;
$white: whitesmoke;
$blue: #4675f9;

@mixin cloneEffect {
    content: "";
    position: absolute;
}

@mixin checkerboard ($size, $base, $accent: rgba(0,0,0,.25)) {
background: $base;
background-image: 
        linear-gradient(45deg, $accent 25%, transparent 0,            transparent 75%, $accent 0),        linear-gradient(45deg,$accent 25%, transparent 0,            transparent 75%, $accent 0);
        background-position: 0 0, $size $size;
        background-size: 2*$size  2*$size;
};

body {
    background-color: $blue;
    display: flex;
    justify-content: center;
    align-items:center;
    padding:20px;
    position: relative;
}

// top halfcircle
body::before {
    @include cloneEffect();
    background-color:$blue;
    width:100px;
    height:100px;
    z-index: 5;
    top:-40px;
    border-radius:50%;
}

// bottom halfcircle
body::after {
    @include cloneEffect();
    background-color:$blue;
    width:100px;
    height:100px;
    z-index: 5;
    border-radius:50%;
    bottom:-40px;
}

.pattern-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 100px);
    grid-template-rows: repeat(9, 100px);
    @media(max-width:768px) {
       grid-template-columns: repeat(6, 75px);
        grid-template-rows: repeat(9, 75px); 
    }
    @media(max-width:480px) {
       grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(6, 100px); 
    }
    @media(max-width:400px) {
       grid-template-columns: repeat(3, 75px);
        grid-template-rows: repeat(6, 75px); 
    }
    background-color: $white;
    border-radius: 10%;
    z-index: 1;
    overflow:hidden;
}

// dots overlay effect
.pattern-container::after{
    @include cloneEffect;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:transparent;
    background-image: radial-gradient(white 20%, transparent 0), 
    radial-gradient(white 20%, transparent 0);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
    z-index: 3;
    opacity: .7;
}

// white border
.pattern-container::before{
    @include cloneEffect;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:transparent;
    z-index: 4;
    border-right: 3px solid white;
    border-top: 3px solid white;
}

.pattern-container > div {
    z-index: 2;
    width: 100%;
}

.stripes--horizontal{
    grid-column: 2 / 3;
    grid-row: 1;
    background: linear-gradient($black 60%, white 60%, white 0);
    background-size: 100% 40%;
}
.stripes--horizontal--2 {
    @extend .stripes--horizontal;
    grid-column: 1 / 4; 
    grid-row: 2;
}
.stripes--horizontal--3 {
    @extend .stripes--horizontal;
    grid-column: 1 / 2; 
    grid-row: 4;
}
.stripes--horizontal--4 {
    @extend .stripes--horizontal;
    grid-column: 3 / 6; 
    grid-row: 4;
}
.stripes--horizontal--5 {
    @extend .stripes--horizontal;
    grid-column: 5;
    grid-row: 5;
}
.stripes--horizontal--6 {
    @extend .stripes--horizontal--4;
    grid-row: 6;
}
.stripes--horizontal--7 {
    @extend .stripes--horizontal;
    grid-row: 7;
    grid-column: 2;
}
.stripes--horizontal--8 {
    @extend .stripes--horizontal--2;
    grid-row: 8;
}
.stripes--horizontal--9 {
    @extend .stripes--horizontal--3;
    grid-row:5;
}
.stripes--horizontal--10 {
    @extend .stripes--horizontal--3;
    grid-row:6;
}

.stripes--vertical {
    grid-column: 3 / 4;
    grid-row: 1;
    background: linear-gradient(90deg, $black 50%, white 50%);
    background-size: 25% 100%;
}
.stripes--vertical--2 {
    @extend .stripes--vertical;
    grid-column: 6/7;
    grid-row: 1 /4;
    background: linear-gradient(90deg, $black 60%, white 60%, white 0);
    background-size: 40% 100%; 
}
.stripes--vertical--3 {
    @extend .stripes--vertical;
    grid-column: 4;
    grid-row: 5;
}
.stripes--vertical--4 {
    @extend .stripes--vertical;
    grid-column: 3;
    grid-row: 7;
}
.stripes--vertical--5 {
    @extend .stripes--vertical--2;
    grid-column: 6;
    grid-row: 7 / 10;
}

.stripes--diagonal{
    grid-column: span 1 / 2;
    grid-row:1;
    background: repeating-linear-gradient(45deg, $black, $black 25px, $white 0, $white 50px);
}
.stripes--diagonal--2 {
    @extend .stripes--diagonal;
    grid-column: 4 / 5;
    grid-row: 2;
    position: relative;
}
.stripes--diagonal--2::after {
    @include cloneEffect;
    @extend .stripes--diagonal;
    width:100%;
    left: 100%;
    top:0;
    bottom:0;   
}
.stripes--diagonal--3 {
    @extend .stripes--diagonal;
    grid-column: 5 / 6; 
    grid-row:3;
}
.stripes--diagonal--4 {
    @extend .stripes--diagonal;
    grid-column: 6 / 7; 
    grid-row: 4;
}
.stripes--diagonal--5 {
    @extend .stripes--diagonal--4;
    grid-row: 5;
}
.stripes--diagonal--6 {
    @extend .stripes--diagonal--4;
    grid-row: 6;
}
.stripes--diagonal--7 {
    @extend .stripes--diagonal;
    grid-row: 7;
}
.stripes--diagonal--8 {
    @extend .stripes--diagonal--2;
    grid-row: 8;
}
.stripes--diagonal--9 {
    @extend .stripes--diagonal--3;
    grid-row: 8;
}
.stripes--diagonal--10 {
    @extend .stripes--diagonal--3;
    grid-row: 9;
}

.hounds-tooth{
    grid-column: 4 / 5;
    grid-row: 1;
    background: linear-gradient(45deg, $black 50%, $white 0);
    background-size: 17% 17%;
}
.hounds-tooth--2 {
    @extend .hounds-tooth;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row: 3; 
    background-size: 5.6% 17%;
}
.hounds-tooth--3{
    @extend .hounds-tooth;
    grid-column:4;
    grid-row: 7;
}
.hounds-tooth--4{
    @extend .hounds-tooth--2;
    grid-row: 9;
}
.hounds-tooth--5{
    @extend .hounds-tooth;
    grid-column: 3;
    grid-row: 5;
}

.checkerboard--big{
    grid-column: 5 / 6;
    grid-row: 1;
    @include checkerboard(25px, $white, $black);
}

.checkerboard--big--2{
    @extend .checkerboard--big; 
    grid-column: 4 / 5;
    grid-row: 3; 
}
.checkerboard--big--3{
    @extend .checkerboard--big; 
    grid-column: 2;
    grid-row: 4 / 7; 
}
.checkerboard--big--4{
    @extend .checkerboard--big; 
    grid-column: 5;
    grid-row: 7; 
}
.checkerboard--big--5{
    @extend .checkerboard--big--2; 
    grid-row: 9; 
}

View Compiled

This Pen is owned by LizFaria on CodePen.

See more by @chefLiz on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.