• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Genesis
    • WooCommerce
    • WordPress
  • Premium
  • Blog
  • About
    • Tools I Use
  • Contact
  • Login
Home » grid

grid

Responsive Grid Layout UI Design HTML + CSS

2020-09-09 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

 
 
Forgot Password

Filed Under: Premium Content, UI / UX Tagged With: grid, layout

Masonry Grid Layout with CSS

2020-08-29 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX Tagged With: grid, masonry

CSS Grid Template Area

2018-11-11 by Gabor

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

Filed Under: CSS Tagged With: grid

CSS Grid with Flexbox

2018-11-11 by Gabor

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

Filed Under: CSS Tagged With: grid

CSS Grid with Media Queries

2018-11-11 by Gabor

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

Filed Under: CSS Tagged With: grid

Primary Sidebar

  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
WP Rocket - WordPress Caching Plugin
UpdraftPlus Premium

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy
  • Flames Design
© 2021 WP Flames - All Right Reserved