Skip to content

Instantly share code, notes, and snippets.

@davidde

davidde/Grid&Flex.html

Last active November 13, 2018 15:10
Show Gist options
  • Save davidde/02d0fea2e7b8c152b130661c6995950b to your computer and use it in GitHub Desktop.
Save davidde/02d0fea2e7b8c152b130661c6995950b to your computer and use it in GitHub Desktop.
Download ZIP
Simple CSS Grid & Flexbox Intro: https://codepen.io/DavidDeprost/pen/OaXvqo
Raw
Grid&Flex.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid & Flexbox</title>
</head>
<body>
<div class='header'>
<h2>Header beautifully centered with flexbox.</h2>
</div>
<div class='sidebar'>
<div class='item'>One </div>
<div class='item'>Two </div>
<div class='item'>Three</div>
<div class='item'>Four </div>
<div class='item'>Five </div>
</div>
<div class='content'>
<h3>
Resize window to showcase responsive features
of css grid and flexbox!
</h3><br>
<p>Wall of text here ...</p>
<!-- Comment out both 'Lorem ipsum' paragraphs
to understand the small height viewport
problems. The problem does not manifest
itself when the content area is properly
filled. (Also comment out 'overflow: auto;'
in .sidebar, and then resize the browser
such that it is only a few cm high.) -->
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
xercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
xercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>
Raw
style.css
html, body {
/* Experiment with these! */
/* Set margin and padding to 0,
otherwise auto-margins create scrollbars
when width/height is set to 100! */
margin: 0;
padding: 0;
/* Set 'height: 100%' on html and body,
as they don't have a size by default;
otherwise the page backgrounds will only
be partially filled when you have little content.
100vh vs 100%:
'height: 100vh' = 100% of the viewport height
(100% of the available height for nested items)
'height: 100%' = 100% of the parent's element
height (or the window for html/body) */
height: 100%;
}
body {
/* In CSS Grid, the set of columns and rows are
called tracks. In this case we declare the
body as the grid. */
display: grid;
/* 'grid-template-columns' takes a sequence of
sizes that define the individual columns. We want
a design with 2 columns that resize responsively
to changes to the viewport. The first column,
which will hold the sidebar, should be a quarter
of the viewport width, but never smaller than its
contents (we don't want the buggy look of text
overflowing its container). To accomplish this
we use the minmax() function to set the minimum
width to 'min-content', and the maximum to 25%
of the viewport width. fr, the fraction unit,
is a grid-specific unit that allows us to
elegantly express proportions in relation to
each other. The fr will automatically expand to
fill the available space. */
grid-template-columns: minmax(min-content, 25vw) 1fr;
/* 'grid-template-rows' takes a sequence of sizes
that define the individual rows. */
grid-template-rows: minmax(min-content, 15vh) 1fr;
/* 'grid-template-areas' takes a string of
space-separated names, allowing us to give each
cell a name. If two adjacent cells have the same
name, they are going to be coalesced into the
same area. To finish up, we need to register
our chosen names as 'grid-areas' in the
respective css classes (see below). */
grid-template-areas: 'sidebar header'
'sidebar content';
}
.header {
background-color: #c0392b;
color: aqua;
/* Register header from 'grid-template-areas'
as 'grid-area' */
grid-area: header;
/* Use flexbox for centering */
display: flex;
/* Horizontally center text in header */
justify-content: center;
/* Vertically center text in header */
align-items: center;
padding: 1rem;
}
.sidebar {
background-color: #7f8c8d;
grid-area: sidebar;
display: flex;
flex-direction: column;
/* 'justify-content: flex-start | flex-end |
center | space-between | space-around |
space-evenly;' => controls how the flex-items
are spaced along the main axis.
NOTE:
This will only result in any changes
when you set 'flex-grow' in .item back to
its default 0 instead of 1!
(Otherwise the flex-items will grow to fill
available space).
OR:
You could just resize the viewport width to
below 768px so the media query activates. */
justify-content: space-evenly;
padding: 0.5rem;
/* 'overflow: auto' provides a scrollbar
when the sidebar contents would overflow
the flex container on very small height
viewports. Comment this out to see the
problem ... */
overflow: auto;
/* (Also comment out both 'Lorem
ipsum' paragraphs in .content, or the
problem won't manifest itself. Then
resize the height of the viewport to
very small.) */
}
.item {
/* 'flex' is the shorthand for flex-grow,
flex-shrink and flex-basis combined:
* flex-grow defines the ability for a flex
item to grow if necessary. It accepts a
unitless value that serves as a proportion.
If all items have flex-grow set to 1,
the remaining space in the container will
be distributed equally to all children.
Default = 0!
* flex-shrink defines the ability for a flex
item to shrink if necessary.
Default = 1!
* flex-basis defines the default size of an
element before the remaining space is
distributed. The content keyword means
'size it based on the item's content'.
The auto keyword means 'look at my width
or height property'.
Default = auto!
NOTE:
Setting 'flex: 1;' is identical to
setting 'flex: 1 1 auto;', because 1 and
auto are the defaults for flex-shrink and
flex-basis respectively! */
flex: 1;
/* ^ Comment out 'flex: 1' to set 'flex-grow'
back to its default 0! */
background: #e0ddd5;
padding: 1rem;
margin: 0.5rem;
height: max-content;
}
.content {
background-color: #84a2c0;
color: rgb(35, 24, 109);
grid-area: content;
padding-left: 6rem;
padding-right: 4rem;
padding-top: 2rem;
}
@media (max-width: 768px) {
/* On viewports smaller than 768px,
remodel the sidebar. */
.item {
flex: 0;
padding-top: 2.4rem;
padding-bottom: 2.4rem;
}
.sidebar {
justify-content: flex-start;
}
.content {
padding-left: 2rem;
padding-right: 1rem;
}
}
@media (max-width: 480px) {
/* On viewports smaller than 480px,
remodel the overall layout. */
body {
grid-template-columns: 1fr;
grid-template-rows: minmax(min-content, 15vh) minmax(min-content, 10vh) 1fr;
grid-template-areas: 'header'
'sidebar'
'content';
}
.sidebar {
/* 'flex-flow' is a shorthand for the 'flex-direction'
and 'flex-wrap' properties, which together define
the flex container's main and cross axes.
Default = row nowrap.
* 'flex-direction: row | row-reverse | column |
column-reverse;'
* 'flex-wrap: nowrap | wrap | wrap-reverse;' */
flex-flow: row wrap;
/* flex-flow: row nowrap; */
padding: 0.2rem;
}
.item {
/* Notice difference when setting 'flex-basis'
to content! */
/* flex: 1 1 content; */
flex: 1;
padding: 0.2rem;
margin: 0.2rem
}
.header {
padding-left: 2.5rem;
}
}
@media (max-width: 300px) {
/* On viewports smaller than 300px,
remodel the overall layout. */
.sidebar {
/* 'flex-flow' is a shorthand for the 'flex-direction'
and 'flex-wrap' properties, which together define
the flex container's main and cross axes.
Default = row nowrap.
* 'flex-direction: row | row-reverse | column |
column-reverse;'
* 'flex-wrap: nowrap | wrap | wrap-reverse;' */
flex-flow: row nowrap;
/* flex-flow: row wrap; */
padding: 0.2rem;
}
.item {
/* Notice difference when setting 'flex-basis'
to content! */
flex: 1 1 content;
/* flex: 1; */
}
}
@media (max-device-width: 480px) and (min-resolution: 200dpi) {
/* On high end mobile phones,
remodel the overall layout. */
body {
grid-template-columns: 1fr;
grid-template-rows: minmax(min-content, 15vh) minmax(min-content, 10vh) 1fr;
grid-template-areas: 'header'
'sidebar'
'content';
}
.sidebar {
/* 'flex-flow' is a shorthand for the 'flex-direction'
and 'flex-wrap' properties, which together define
the flex container's main and cross axes.
Default = row nowrap.
* 'flex-direction: row | row-reverse | column |
column-reverse;'
* 'flex-wrap: nowrap | wrap | wrap-reverse;' */
/* flex-flow: row wrap; */
flex-flow: row nowrap;
}
.item {
/* Notice difference when setting 'flex-basis'
to content! */
flex: 1;
padding: 0.5rem;
}
.header {
padding-left: 2.5rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment