Simple Grid

Developer
Dan
Size
1,960 Kb
Views
6,072
  1. Simple Grid Previews
  2. Simple Grid HTML Codes
  3. Simple Grid CSS Codes

How do I make an simple grid?

A very simple grid system. No bells or whistles. Just a responsive grid in under 30 lines of CSS.. What is a simple grid? How do you make a simple grid? This script and codes were developed by Dan on 07 January 2023, Saturday.

Simple Grid Previews
IQ Test

Simple Grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Grid</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Classes a1-a12 only used for example purposes in this Pen. Not needed in a real project. -->
<div class="grid"> <div class="a1 col-4"></div> <div class="a2 col-4"></div> <div class="a3 col-4"></div> <div class="a4 col-4"></div> <div class="a5 col-4"></div> <div class="a6 col-4"></div> <div class="a7 col-4"></div> <div class="a8 col-4"></div> <div class="a9 col-4"></div> <div class="a10 col-4"></div> <div class="a11 col-4"></div> <div class="a12 col-4"></div>
</div>
</body>
</html>

Simple Grid - Script Codes CSS Codes

/* Give container div ".grid" class to set a max-width for the grid */
.grid { max-width: 900px; margin: 0 auto;
}
/* Use ".col-3" class for 3 columns max
Use ".col-4" class for 4 columns max */
.col-3,
.col-4 { width: 90%; margin: 1em auto;
/* "border-box" allows the grid to work when divs have borders */ box-sizing: border-box;
}
@media (min-width: 480px) { .col-3, .col-4 { width: 46%; float: left; margin: 2%; }
}
@media (min-width: 768px) { .col-3, .col-4 { width: 30%; margin: 1.65%; }
}
/* Not needed for 3 column max grid */
@media (min-width: 992px) { .col-4 { width: 23%; margin: 1%; }
}
/* The code below is just for example use in this Pen to make the divs show up. */
.a1 { background-color: red; height: 5em;
}
.a2 { background-color: blue; height: 5em;
}
.a3 { background-color: pink; height: 5em;
}
.a4 { background-color: yellow; height: 5em;
}
.a5 { background-color: purple; height: 5em;
}
.a6 { background-color: green; height: 5em;
}
.a7 { background-color: black; height: 5em;
}
.a8 { background-color: gray; height: 5em;
}
.a9 { background-color: orange; height: 5em;
}
.a10 { background-color: #CCC; height: 5em;
}
.a11 { background-color: #888; height: 5em;
}
.a12 { background-color: #BBB; height: 5em;
}
Simple Grid - Script Codes
Simple Grid - Script Codes
Home Page Home
Developer Dan
Username danbuda
Uploaded January 07, 2023
Rating 3
Size 1,960 Kb
Views 6,072
Do you need developer help for Simple Grid?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dan (danbuda) Script Codes
Name
Sass Mixin Example
Sticky Footer
Simple React Router
CSS Grid Using Inline-Block
Sorting Items While Ignoring Articles
React Routing with this.props.children
Just Some Buttons
My First Mixin
Simple Collapsable Navbar
React Collapsable Navbar
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!