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";
  
}

Demo

/* ===================================== 
   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;
}

Demo

/* ===================================== 
   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";
  }
}