CSS Grid Area demo

Developer
Kevin
Size
3,928 Kb
Views
54,648
  1. CSS Grid Area demo Previews
  2. CSS Grid Area demo HTML Codes
  3. CSS Grid Area demo CSS Codes

How do I make an css grid area demo?

Further my dive into CSS Grid, I look at how to use grid-template-areas to build a nice looking layout for my latest video tutorial on YouTube. What is a css grid area demo? How do you make a css grid area demo? This script and codes were developed by Kevin on 04 December 2022, Sunday.

CSS Grid Area demo Previews
IQ Test

CSS Grid Area demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Grid Area demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1 class="header-title">CSS Grid - grid-template-areas</h1>
</header>
<div class="hero"> <h1 class="hero-title">Grid areas</h1> <p class="hero-subtitle">Making life easier</p>
</div>
<main> <h1>From the blog</h1> <div class="card"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/gridarea-card-img-01.jpg" alt="" class="card-img"> <h2 class="card-title">Blog post title</h2> <div class="card-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere semper urna, ut pellentesque sem fermentum vel. Mauris luctus quis lectus nec luctus. Donec ut diam et neque eleifend varius sed quis erat.</p> <a href="">Read more</a> </div> </div> <div class="card"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/gridarea-card-img-01.jpg" alt="" class="card-img"> <h2 class="card-title">Blog post title</h2> <div class="card-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere semper urna, ut pellentesque sem fermentum vel. Mauris luctus quis lectus nec luctus. Donec ut diam et neque eleifend varius sed quis erat.</p> <a href="">Read more</a> </div> </div> <div class="card"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/gridarea-card-img-01.jpg" alt="" class="card-img"> <h2 class="card-title">Blog post title</h2> <div class="card-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere semper urna, ut pellentesque sem fermentum vel. Mauris luctus quis lectus nec luctus. Donec ut diam et neque eleifend varius sed quis erat.</p> <a href="">Read more</a> </div> </div>
</main>
<aside> <h1>Sidebar stuff</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere semper urna, ut pellentesque sem fermentum vel. Mauris luctus quis lectus nec luctus. Donec ut diam et neque eleifend varius sed quis erat. In tempor pharetra felis at fermentum. Maecenas iaculis neque orci, sit amet sodales quam venenatis sit amet. Praesent eu enim nec velit bibendum accumsan a sed tellus. Aenean sed justo a tortor hendrerit imperdiet efficitur nec risus. Morbi gravida mi quis ultrices elementum. Pellentesque fermentum sodales sagittis. Sed vel efficitur nisl. Ut congue sodales sapien. Duis ultricies felis nunc, eu semper est tincidunt eu. Curabitur faucibus luctus eros, eget semper mauris dictum vel.</p>
</aside>
<footer> <h1 class="footer-title">the end</h1>
</footer>
</body>
</html>

CSS Grid Area demo - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Merriweather:300,900|Six+Caps");
body { font-family: "Merriweather", serif; font-size: 1rem; font-weight: 300; color: #252525; line-height: 1.6; display: -ms-grid; display: grid; grid-template: "header header header header" 10em "hero hero hero hero" 50vh ". main sidebar ." auto "footer footer footer footer" 10em/1fr minmax(30em, 5fr) minmax(15em, 2fr) 1fr; grid-column-gap: 1.5em;
}
header { grid-area: header;
}
header,
footer { background: #252525; color: #e9d20f; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.header-title,
.footer-title { font-family: "Six Caps", sans-serif; font-size: 2.875rem; color: #e9d20f; text-transform: uppercase; letter-spacing: 0.3em;
}
.hero { grid-area: hero; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/gridarea-hero-bg.jpg); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.hero-title { font-family: "Six Caps", sans-serif; font-size: 6rem; color: #252525; text-transform: uppercase; letter-spacing: 0.3em; margin: 0;
}
.hero-subtitle { font-family: "Merriweather", serif; font-size: 2.875rem; font-weight: 300; color: #fff; margin: 0;
}
main { grid-area: main;
}
aside { grid-area: sidebar; background: #e8e8e8; padding: 2em;
}
footer { grid-area: footer;
}
.card { display: -ms-grid; display: grid; grid-template: "img title" min-content "img content" auto / 1fr 3fr; grid-column-gap: 1.5em; box-shadow: 0 0 1em rgba(0, 0, 0, 0.5); padding: 1.5em; margin-bottom: 1.5em;
}
.card-img { grid-area: img; max-width: 100%;
}
.card-title { grid-area: title; margin: 0; font-weight: 300;
}
.card-content { grid-area: content;
}
.card-content a { color: #e9d20f; font-size: 1.1em;
}
CSS Grid Area demo - Script Codes
CSS Grid Area demo - Script Codes
Home Page Home
Developer Kevin
Username kevinpowell
Uploaded December 04, 2022
Rating 3
Size 3,928 Kb
Views 54,648
Do you need developer help for CSS Grid Area demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin (kevinpowell) Script Codes
Name
Non-rectangular sections
Explicit and Implicit grid
Very simple jQuery dropdown navigation
Anchors with smooth scrolling
Flexbox - Flexbox Basic Layout - start
Awesome Portfolio demo
Bootstrap grid basics
Margin vs Padding
Anchors
CSS outlines
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!