Skip to content

Instantly share code, notes, and snippets.

@davilera

davilera/01-bootstrap.html Secret

Last active April 21, 2017 09:32
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 davilera/00df1c88cf6acfe177a329a4ef084161 to your computer and use it in GitHub Desktop.
Save davilera/00df1c88cf6acfe177a329a4ef084161 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Grid
Raw
01-bootstrap.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="colors.css">
<style>
article { height: 10em; }
#a1 { height: 22em; }
#a2 { margin-bottom: 2em; }
#a4 { margin-bottom: 2em; }
</style>
</head>
<body class="container-fluid">
<!-- Menu... -->
<h1>Welcome to BBC.com</h1>
<div class="header row">
<div class="col-xs-6">
<article id="a1">Last Trump rival quits Republican race</article>
</div><!-- .col-xs-6 -->
<div class="col-xs-3">
<article id="a2">Real Madrid 1-0 Manchester City (agg 1-0)</article>
<article id="a3">Reinventing China's hated 'abortion police'</article>
</div><!-- .col-xs-3 -->
<div class="col-xs-3">
<article id="a4">The dying art of headhunting tattoos</article>
<article id="a5">Six reasons the election will make history - no matter who wins</article>
</div><!-- .col-xs-3 -->
</div><!-- .header -->
<h2>News</h2>
<div class="news row">
<div class="col-xs-4">
<article id="a6">Canada wildfire threatens entire city</article>
</div><!-- .col-xs-4 -->
<div class="col-xs-4">
<article id="a7">Addiction doctor made Prince 911 call</article>
</div><!-- .col-xs-4 -->
<div class="col-xs-4">
<article id="a8">Syria truce 'extended to Aleppo'</article>
</div><!-- .col-xs-4 -->
</div><!-- .news -->
</body>
</html>
Raw
02-css-grid.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="colors.css">
</head>
<body>
<!-- Menu... -->
<h1>Welcome to BBC.com</h1>
<div class="header">
<article id="a1">Last Trump rival quits Republican race</article>
<article id="a2">Real Madrid 1-0 Manchester City (agg 1-0)</article>
<article id="a3">The dying art of headhunting tattoos</article>
<article id="a4">Reinventing China's hated 'abortion police'</article>
<article id="a5">Six reasons the election will make history - no matter who wins</article>
</div><!-- .header -->
<h2>News</h2>
<div class="news">
<article id="a6">Canada wildfire threatens entire city</article>
<article id="a7">Addiction doctor made Prince 911 call</article>
<article id="a8">Syria truce 'extended to Aleppo'</article>
</div><!-- .news -->
</body>
</html>
Raw
03-style.css
.header {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 10em 10em;
grid-gap: 1em;
width: 100%;
}
.news {
display: grid;
grid-template-columns: repeat( 3, 1fr );
grid-template-rows: 10em;
grid-gap: 1em;
}
Raw
04-style.css
.header {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 10em 10em;
grid-gap: 1em;
width: 100%;
}
.news {
display: grid;
grid-template-columns: repeat( 3, 1fr );
grid-template-rows: 10em;
grid-gap: 1em;
}
.header article:first-child {
grid-row-start: 1;
grid-row-end: 3;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment