/* This is an example of a simple responsive grid defining columns for the elements of a container 
that shift as the screen resizes
the first set of rules defines the behavior on the smallest screen
and the @ media queries define display for progressively 
larger screens
*/

/* unlike flex, grid is not automatically responsive */

.main {
  padding: 2em 4em;
}
/* set display to grid, and use grid-template-columns to define columns
* you can also use grid-template-rows.  Grid-gap defines the gap between items */

/* 1 column on small screens */
.container {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 15px; /*you can also set rows and columns in two properties */
  background-color: rgba(224, 64, 216, 0.8);
  color: #fff;
  padding: 10px;
}

/*two columns on medium screens */
@media only screen and (min-width: 600px) {
  .container {
    grid-template-columns: auto auto;
  }
}

/*three columns on large screens */
@media only screen and (min-width: 800px) {
  .container {
    grid-template-columns: auto auto auto;
  }
}

/*
The columns are defined by the container so no positioning needs to be set on the child items
*/
.item {
  background-color: rgba(87, 83, 197, 0.815);
  color: #ccc;
  border-radius: 4px;
  padding: 10px;
  font-size: 1.6em;
  min-height: 12em;
}

/*you can also set items to be wider */
.longer-item {
}

/* 
* Second example with grid-areas defined 
* you can also use grid-areas to build a grid.
* The sizing and spacing of these areas is defined in the
* grid-template-areas rule on .container2
*/

.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.header {
  grid-area: header;
}
.footer {
  grid-area: footer;
}

.container2 {
  display: grid;
  grid-gap: 15px;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

@media only screen and (max-width: 760px) {
  /* define rules for smaller screens */
  .container2 {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

/*style for all of the content areas with also have the class .box */
.box {
  background-color: rgb(39, 41, 41);
  color: rgba(115, 231, 19, 0.8);
  border-radius: 5px;
  padding: 15px;
  font-size: 1.4em;
}

h1 {
  text-align: center;
}

/**
*  Grid Reference and Examples
*
*  https://www.w3schools.com/css/css_grid.asp
*
*  https://css-tricks.com/snippets/css/complete-guide-grid/
*
*  https://gridbyexample.com/
*  
**/