Grid

/* ===================================================================== 
    Practice CSS Grid Layout
 ======================================================================== */
 /* 
   Target each grid item. 
   Give each selector a grid area name.
 */
 header {
   grid-area: head;
 }
 main {
   grid-area: main;
 }
 .about {
   grid-area: about;
 }
 .news {
   grid-area: news;
 }
 .links {
   grid-area: links;
 }
 .ads {
   grid-area: ads;
 }
 footer {
   grid-area: foot;
 }
 .grid {
   height: 100vh;
   display: grid;
 /* Set only the top row to 100px */
   grid-template-rows: 100px;
 /* 
     Declare 3 flexible column tracks
      - The first track should take up two fractions of the available space
      - The second and third tracks should take up one fraction of the space
   */
   grid-template-columns: 2fr 1fr 1fr;  
 /* Apply a 10px gutter between rows and columns */
   grid-gap: 10px;
 /*  
     Place items on the grid using their grid area names
       - Use the image 'grid-template-areas.png' as a reference
   */
   grid-template-areas: 
     "head head head"
     "main about news"
     "main links ads"
     "main foot foot";
 }

/* ===================================== 
    Grid & Flexbox Layout
 ======================================== */
 .main-content {
   width: 95%;
   max-width: 1000px;
 display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   grid-gap: 20px;
 }
 .card {
   display: flex;
   flex-direction: column;
 }
 .btn {
   margin-top: auto;
 }

/* ===================================== 
    Grid Layout
 ======================================== */
 .container {
   height: 100vh;
   display: grid;
   grid-template-columns: 1fr;
   grid-auto-rows: minmax(150px, auto);
   grid-gap: 10px;
   grid-template-areas: 
     "header"
     "nav"
     "main"
     "aside"
     "footer";
 }
 header {
   grid-area: header;
 }
 nav {
   grid-area: nav;
 }
 main {
   grid-area: main;
 }
 aside {
   grid-area: aside;  
 }
 footer {
   grid-area: footer;
 }
 @media (min-width: 768px) {
   .container {
     grid-template-columns: 1fr 2fr 1fr;
     grid-template-rows: 100px minmax(150px, auto) 100px;
     grid-template-areas: 
       "header header header"
       "nav main aside"
       "footer footer footer";
   }
 }
 @media (min-width: 992px) {
   .container {
     grid-template-areas: 
       "header header header"
       "nav main aside"
       "nav footer footer";
   }
 }