Skip to content

Instantly share code, notes, and snippets.

@davidvandenbor

davidvandenbor/.gitignore

Last active January 30, 2022 18:23
Show Gist options
  • Save davidvandenbor/309daa0d20eb003d65a2bbfa4d0500c8 to your computer and use it in GitHub Desktop.
Save davidvandenbor/309daa0d20eb003d65a2bbfa4d0500c8 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Grid imitating Bootstrap
Raw
css-grid-imitating-bootstrap-span-classes.markdown

CSS Grid imitating Bootstrap span classes

CSS grid makes making layouts a breeze nowadays.
No more obfuscated and hacky attempts at making scalable grid systems. You can imitate Bootstraps entire 12 columns grid system with just a couple of lines of CSS code.
Preview: at bl.ocks.org

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<main>
<header>
<h2>header</h2>
</header>
<nav>
<h2>nav</h2>
</nav>
<article>
<h2>article</h2>
</article>
<footer>
<h2>footer</h2>
</footer>
</main>
</body>
</html>
Raw
style.css
main {
max-width:800px;
padding:0 5%;
margin:0 auto;
display:grid;
grid-gap:8px;
grid-template-columns: repeat(12,1fr);
grid-template-rows:100px 200px 70px;
}
h2 {
font-size: 17px;
font-weight: 100;
}
header,nav,article,footer {
font-family:Arial, Helvetica, sans-serif;
background: rgba(167, 206, 218, 1.0);
padding:0 0 0 20px
}
header { grid-column:span 12;}
nav { grid-column:span 3;}
article { grid-column:span 9;}
footer { grid-column:span 12;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment