Pirate Web | Snippets that build the web.

Snippets that build the web.

Snippet Information

Title: Basic CSS Grid

Description: A small and basic responsive CSS grid.

Tags: css, grid, responsive

Author: danc0

View Demo

Snippet Body

View HTML expand_more

Copy Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Grid</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>

    <div class="row">
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
    </div>
    <div class="row">
        <div class="col-2"></div>
        <div class="col-2"></div>
        <div class="col-2"></div>
        <div class="col-2"></div>
        <div class="col-2"></div>
        <div class="col-2"></div>
    </div>
    <div class="row">
        <div class="col-3"></div>
        <div class="col-3"></div>
        <div class="col-3"></div>
        <div class="col-3"></div>
    </div>
    <div class="row">
        <div class="col-4"></div>
        <div class="col-4"></div>
        <div class="col-4"></div>
    </div>
    <div class="row">
        <div class="col-6"></div>
        <div class="col-6"></div>
    </div>
    <div class="row">
        <div class="col-12"></div>
    </div>

</body>

</html>

View CSS expand_more

Copy Code

:root{
    --grid-col:12;
}
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.row{
    width:100%;
	margin: 0 auto 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    word-break: break-word;
}

.col-1{
    width: calc(1 / var(--grid-col) * 100%);
}
.col-2{
    width: calc(2 / var(--grid-col) * 100%);
}
.col-3{
    width: calc(3 / var(--grid-col) * 100%);
}
.col-4{
    width: calc(4 / var(--grid-col) * 100%);
}
.col-5{
    width: calc(5 / var(--grid-col) * 100%);
}
.col-6{
    width: calc(6 / var(--grid-col) * 100%);
}
.col-7{
    width: calc(7 / var(--grid-col) * 100%);
}
.col-8{
    width: calc(8 / var(--grid-col) * 100%);
}
.col-9{
    width: calc(9 / var(--grid-col) * 100%);
}
.col-10{
    width: calc(10 / var(--grid-col) * 100%);
}
.col-11{
    width: calc(11 / var(--grid-col) * 100%);
}
.col-12{
    width: calc(12 / var(--grid-col) * 100%);
}

div[class^='col-']{
    flex-shrink:0;
    flex-grow:0;
    padding:10px;
    /* Display only*/
    border:1px solid white;
    background: red;
    height:100px;
}

@media screen and (max-width:700px) {
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        width: 100%;
    }
    .row{
        flex-direction: column;
    }
}
@media screen and (max-width:900px) {
    .col-1-md,
    .col-2-md,
    .col-3-md,
    .col-4-md,
    .col-5-md,
    .col-6-md,
    .col-7-md,
    .col-8-md,
    .col-9-md,
    .col-10-md,
    .col-11-md,
    .col-12-md {
        width: 100%;
    }
}
@media screen and (max-width:1000px) {
    .col-1-lg,
    .col-2-lg,
    .col-3-lg,
    .col-4-lg,
    .col-5-lg,
    .col-6-lg,
    .col-7-lg,
    .col-8-lg,
    .col-9-lg,
    .col-10-lg,
    .col-11-lg,
    .col-12-lg {
        width: 100%;
    }
}