davidde/Grid&Flex.html

## 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>

## 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;
  }
}
	<!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>
	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;
	}
	}