/*
* MyGrid v0.0.01 - grid-fallback.css
* Copyright 2017, Daniela Knoll
* GitHub: @ElaOnMars
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 2017-10-10
*/


/* 
* This stylesheet tries to code grid fallbacks
* for older browsers.
* Generell behavior: Enter grid. If the browser 
* cannot interpretate the grid comands correctly
* enter the div container as a fallback
* This CSS was inspired by reading
* https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks.
* The ideas friendly grepped from @rachelandrew at codepen.io.
* ...
*/


/* Table of contents
====================================================
- Grid fallbacks for older browsers (tables)
*/


/* Grid
==================================================== */

/* Floated items
______________________________ */

/* Grid fallback */
.grid > div {
  float: left;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
  width: 500px;    /* Default: 500px */
}

.grid > div {
  background-color: #694486;
  color:#fff;
  padding: 10px;
  border-radius: 5px;
}

/* Call it with:
<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div> 
*/


/* display: inline-block
______________________________ */

/* Grid fallback */
.grid2 > div {
  display: inline-block;
}

.grid2 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
  width: 500px;    /* Default: 500px */
}

.grid2 > div {
  background-color: pink;
  color:#fff;
  padding: 10px;
  border-radius: 5px;
}

/* Call it with:
<div class="grid2">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>
*/


/* display: table properties
______________________________ */

/* Grid fallback */
.grid-table > div {
  display: table-cell;
  vertical-align: top;
}

.grid-table {
  border-spacing: 10px;
}

.grid-table {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
  width: 500px;    /* Default: 500px */
}

.grid-table > div {
  background-color: seagreen;
  color:#fff;
  padding: 10px;
  border-radius: 5px;
}

/* Call it with:
<div class="grid-table">
  <div>One</div>
  <div>Two</div>
  <div>Three
  <br>Has
  <br>extra
  <br>content</div>
</div>
*/


/* vertical-align property (table properties)
_____________________________________________ */
/* Items using display: inline-block or display: 
   table-cell can be aligned when you use  
   CSS vertical-align. */
.grid-vertical > div {
  display: inline-block;
  vertical-align: top;
}

.grid-vertical {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
  width: 500px;    /* Default: 500px */
}

.grid-vertical > div {
  display: inline-block;
  vertical-align: top;
  background-color: #694486;
  color:#fff;
  padding: 10px;
  border-radius: 5px;
}

/* Call it with:
<div class="grid-vertical">
  <div>One</div>
  <div>Two</div>
  <div>Three
  <br>Has
  <br>extra
  <br>content</div>
</div>
*/


/* Multi-column layout properties 1
_______________________________________ */

/* These properties will cretae a single table */
.grid-multi-column-1 {
  column-count: 3;
  width: 500px;    /* Default: 500px */
}

.grid-multi-column-1 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
}

.grid-multi-column-1 > div {
  background-color: grey;
  color:#fff;
  padding: 10px;
  border-radius: 5px;
}


/* Multi-column layout properties 2
_______________________________________ */

/* These properties will cretae a single table */
.grid-multi-column-2 {
  column-count: 3;
  width: 500px;    /* Default: 500px */
}

.grid-multi-column-2 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
}

.grid-multi-column-2 > div {
  display: inline-block;  /* added */
  vertical-align: top;    /* added */
  background-color: orange;
  color:#fff;
  padding: 10px;
  border-radius: 5px;
}


/* Flexbox
_______________________________ */
/* Flexbox works with more browsers than Grid.
Flex items become grid items.
Flexbox can be used as a fallback too.
The Flexbox and the Grid specifications share the Box Alignment properties.
That means you can create a layout with Flexbox and add some Grid properties
to it. */
.grid-flexbox {
  display: flex;
  align-items: center;
  width: 500px;    /* Default: 500px */
  height: 200px;
  border: 2px dotted #694486;
}

.grid-flexbox > div {
  flex: 1;
}

.grid-flexbox {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
}

.grid-flexbox > div {
  background-color: #694486;
  color:#fff;
  padding: 10px;
  border-radius: 5px;
}

/* Call it with:
<div class="grid-flexbox">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div> 
*/


/* Attention! Watch your item widths!
__________________________________________ */
/* A width applied in the fallback layout 
can have weird consequences. 
The widths will usually need to be overwritten inside the @supports block. 
Set the width to auto! Items with a percentage width 
inside a sized item will take the percentage from its parent - not from
the grid container.*/
* { box-sizing: border-box; }

.grid-width-fallback > div {
  width: 100%;  /* default 33.333% */
  text-align: left;
}

/* The text is not aligned correctly without this */
.grid-with-fallback-text-align {
  padding: 10px -20px 10px 10px;  /* -10 right is important! */
}

@supports (display: grid-width-fallback) {
  .grid-width-fallback > div {
   width: auto;
  }
}

.grid-width-fallback {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  width: 500px;    /* Default: 500px */
  border: solid 1px gray;
}

.grid-width-fallback > div {
  background-color: darkorchid;
  color:#fff; 
  padding: 10px; /* top right bottom left */
  border: 2px solid red;
  border-radius: 5px;
}

/* The original CSS from the website is different.
In some old browsers they also make weird things.
* { box-sizing: border-box; }

.grid > div {
  float: left;
  width: 33.333%;
}

@supports (display: grid) {
  .grid > div {
    width: auto;
  }
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  width: 500px;
}

.grid > div {
  background-color: #694486;
  color:#fff;
  padding: 10px;
  border-radius: 5px;
}
*/


/* Internet explorer
_______________________________ */
/* default was body { ... Don't know what this makes to others */

ie-body {
  margin: 20px;
}

/*autoprefixer will add the prefixed properties for grid and columns/rows*/
.ie-wrapper {
  display: -ms-grid;
  display: grid; 
  -ms-grid-columns: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  background-color: #fff;
  color: #444;
}

.ie-box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}


/* in the current spec these would be postioned using auto-placement. For IE we need to set the position of the items. */
.a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.b {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.c {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.d {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

.e {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

.f {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
}