Skip to content

Instantly share code, notes, and snippets.

@sandeep1995

sandeep1995/index.html

Created April 2, 2017 16:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sandeep1995/f19b351bd0b6570249eeab1c881c8c78 to your computer and use it in GitHub Desktop.
Save sandeep1995/f19b351bd0b6570249eeab1c881c8c78 to your computer and use it in GitHub Desktop.
Download ZIP
Basic Example of using Native CSS Grids
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Native Css Grids</title>
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<style>
html, body {
padding: 0;
margin: 0;
font-stretch: expanded;
font-family: 'Slabo 27px', serif;
color: #333;
background-color: #efefef;
}
.heading, .wrapper2, .wrapper3{
width: 90%;
max-width: 960px;
margin: 0 auto;
display: grid;
grid-gap: 1em;
}
.heading {
grid-template-columns: repeat(1, 1fr);
}
.wrapper2 {
grid-template-columns: repeat(2, 1fr);
}
.wrapper3 {
grid-template-columns: repeat(3, 1fr);
}
.col {
padding: 1em;
margin: 1em;
border: 1px solid #efefef;
background-color: #fff;
box-shadow: 1px 1px 1px #ccc;
}
@media screen and (max-width:480px) {
.wrapper2, .wrapper3 {
grid-template-columns: repeat(1, 1fr);
}
}
</style>
</head>
<body>
<div class="heading">
<h2 class="col">Native CSS Grids Example</h2>
</div>
<div class="wrapper2">
<div class="col">Do what you can't. Yes, It is a copied quote.</div>
<div class="col">Do what you can't. Yes, It is a copied quote.</div>
<div class="col">Do what you can't. Yes, It is a copied quote.</div>
<div class="col">Do what you can't. Yes, It is a copied quote.</div>
<div class="col">Do what you can't. Yes, It is a copied quote.</div>
<div class="col">Do what you can't. Yes, It is a copied quote.</div>
</div>
<div class="wrapper3">
<div class="col">Do what you can't. Yes, It is a copied quote.</div>
<div class="col">Do what you can't. Yes, It is a copied quote.</div>
<div class="col">Do what you can't. Yes, It is a copied quote.</div>
<div class="col">Do what you can't. Yes, It is a copied quote.</div>
<div class="col">Do what you can't. Yes, It is a copied quote.</div>
<div class="col">Do what you can't. Yes, It is a copied quote.</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment