• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

nSiteful Web Builders

Building a Better Web - One Site at a Time.

  • Home
  • About
    • Testimonials
    • Resources
  • Web Sites
  • Online Marketing
  • WordPress Support
    • Customized WordPress Training
    • 60-for-60 Sessions
  • Web Applications
  • Blog
    • Archive Listing Minimalistic
    • Blog Articles Grouped by Category
    • Case Studies
    • General
    • Portfolio
    • Reviews
    • Snippets
    • Techniques
  • Contact Jeff
    • Purchase Retainer Consulting Hours
    • About Retainer Consulting Hours
Shortest CSS Grid Tutorial EVER! YouTube Thumb Image

By Jeff Cohan, January 26, 2022

Shortest CSS Grid Tutorial EVER!

I’ve been a reluctant/late adapter of the Flexbox and CSS Grid layout systems. I’m not proud of that, but it is what it is. After reading and watching a boatload of tutorials and videos on these systems, I got the idea that I should dive into Flexbox first — and I did.

But then I happened upon an excellent YouTube video by Kevin Powell in which he makes the convincing case that — even though CSS Grid had a lot going on and can seem like a monster — it’s actually the easier of the two systems to get started with.

In the space of under 7 minutes, Kevin made me a convert, and I immediately dove into implementing CSS Grid into a couple of custom Web applications I built years ago.

I then felt challenged to create this video tutorial, with the click-baity title of “Shortest CSS Grid Tutorial EVER!”.

If this helps anyone, I’d love to know it.

And here’s the CSS to copy/paste:

<style>
	.container {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1em;
		
	}
	.container > div {
		padding: .25em .5em;
		border: 2px solid #ddd;
		box-shadow: 1px 1px 4px 1px #ddd;
	}
</style>

Related Posts

  1. NextGen Gallery Compact Album Mods
  2. How to Override MemberPress Template Files
  3. Things WordPress Doesn’t Do So Well: Tables
  4. CSS Descendant Selectors
  5. How to Create Tooltips with CSS (Only)
  • Choose the best match.

Written by Jeff Cohan · Categorized: Snippets · Tagged: CSS, CSS Grid

  • Choose the best match.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

mailchimp signup

Subscribe to get notified when new articles are published. Unsubscribe any time. No spam. I promise. Check out my newsletter archives.

social

Twitter Facebook LinkedIn

Recent Articles

  • Blog Tags: What They Are (and What They’re Not) August 5, 2022
  • How to Create a Simple Custom Events Plugin May 24, 2022
  • Make your Web Site the Heart & Hub of your Online Marketing Strategy March 24, 2022
  • Why SiteGround Hosting? March 11, 2022
  • Tent Birth and Breastfeeding Services January 31, 2022

Filter By Category/Tag

Categories

  • Case Studies (7)
  • General (61)
  • Portfolio (5)
  • Reviews (12)
  • Snippets (15)
  • Techniques (36)

Popular Tags

Advanced Custom Fields Blogging Child Themes Content Marketing CSS Customer Service Custom Fields Custom Post Types Diagnostics Facebook FooGallery Genesis HTML Images iPhone Libra Live Chat Marketing Media MemberPress mu-plugins MySQL online strategy Photo Gallery php Pinterest Plugins Post Formats Pricing Project Management Responsive Web Design Security SEO Seth Godin Shortcodes Social Networking Surveys Taxonomies Twitter Video Web applications Web design Web forms WooThemes WordPress

siteground wp hosting

Web Hosting

wp101

EasyWordPresstutorialvideosforbeginners.
MemberPress CTA

Footer

Background

Web Sites | WordPress Support | Web Applications.

Formally trained in liberal arts and education (I have a B.A. in Government from Harvard and studied Secondary Education at Rutgers Graduate School), I have honed my skills in the communication arts and sciences as a teacher, trainer, instructional designer, writer, photographer, calligrapher, helpdesk manager, database programmer, and multimedia developer.

(I've also been a group counselor, waiter, bartender, bicycle messenger boy, computer salesman, carpenter's helper, financial analyst, and school board president.)

Tech

Systems since 1983.
Web sites since 1994.
PHP since 2001.
WordPress since 2007.

Contact

770-772-5134
Email Jeff
Send Money
All Ways

Copyright 2022, nSiteful Web Builders, Inc.

Subscribe

Pardon the interruption. I know popups can be annoying. But I’d love to have you as a subscriber.

Sign up to be notified when new articles are published. Unsubscribe any time.

* indicates required

Powered by MailChimp

×