Hertha  Mayer

Hertha Mayer


CSS Grid — A Comprehensive Overview

Positioning elements on your page in CSS can often cause headaches. I have recently taken the time to study CSS Flexbox and Grid in depth and feel that given 15 minutes or so of research, anyone can learn to position items on their page with ease. The great thing about CSS Grid too is that it is a great tool for media queries in order to make your site responsive. You can easily decide to show four elements in columns next to each other on a large screen, reduce is to two on a smaller screen or tablet and then take it down to one on a mobile device. Specifying column numbers is super easier and with one line in each media query, you can really improve the responsiveness of a section of your application.

Site with grid layout

Photo by Pankaj Patel on Unsplash

The thing that makes CSS Grid Layout so powerful is that it is a 2-dimensional system. Unlike flexbox which is mainly 1-dimensional and often requires several layers of nesting to creating a grid like layout, in CSS Grid you simply apply styles to one parent element (known commonly as the Grid Container) and then all the containers children (Grid Items).

To start, create a div and give that div a class of container or grid-container so that you can easily style it:

<div class="grid-container"></div>

The first step in your CSS is to give this div a display style of grid, you can choose between grid (block-level grid) and inline-grid (inline):

.grid-container {
    display: grid;

This in itself will change nothing on the page, however, it opens the door to applying styling which will organize the elements you choose to nest within your div.

Let’s say for arguments sake that we added several grid item divs into our container div and we now want to arrange them next to each other in columns of specific sizes. We have quite a few options. We can do this by adding the grid-template-columns CSS property to our grid-container div’s styling:

.grid-container {
    display: grid;
    // Option 1 
    grid-template-columns: 100px 200px auto 300px;
    // Option 2 
    grid-template-columns: 1fr 2fr;
    // Option 3
    grid-template-columns: repeat(4, 100px);

#css-grid #css #styling #web-development #ui

What is GEEK

Buddha Community

CSS Grid — A Comprehensive Overview

13 Cool Simple CSS Grid layout examples

Collection of free hand-picked simple CSS grid examples. Also, it includes a bunch of front-end techniques, tips, and tricks for your future reference. Hope you will like these freebies and find them useful. Happy coding!

  • Styling the last row of a grid with CSS selectors
  • Grid Animation Effects
  • Simple grid mixin
  • Simple Grid CSS Grid
  • Simple CSS Grid Hover
  • Simple css Grid – Responsive
  • Simple css grid system using scss
  • CSS variables simple CSS grid
  • Super Simple CSS Grid
  • 3D Grid UI
  • Aspect ratio Grid boxes with CSS Variables
  • Simple grid system
  • Simple Grid template

#layouts #css grid #grid #layouts #css #css grid layout

9 Free CSS Masonry Grid Layouts

This is a collection of free CSS Masonry grids. I have found around the Codepen! This Masonry grid allows you to easily create grid layouts in HTML and CSS without having to program the whole thing in JavaScript. CSS Masonry grids are a great way to help layout elements in a grid-like format. If you need some inspiration for your next design layout, see the free CSS Masonry grids below.

  • CSS Masonry Grid Animation Effects
  • Using vanilla JS to implement masonry grid
  • Bootstrap Masonry Grid Template
  • Vanilla JS Masonry Grid Layout Method
  • Responsive masonry grid made with ReactJS and flex-box
  • Display Images On Your Website With The Masonry Grid (Vanilla JS)
  • Create a Masonry Style Image Grid with Infinite Scroll in Vanilla JS
  • Isotope & Fancybox Masonry image grid with good animation
  • Build a CSS Masonry grid Layout with just HTML and CSS

#layouts #css grid #grid #css masonry #css #free

Alayna  Rippin

Alayna Rippin


Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯

This effect is so cool and just fun to see. What it comes down to is having a background image show through the text.

How it works is that we will have a div that will have the image as a background. On that, we put our text element, using blend-mode it will show through the image.

The result you can see and touch on this Codepen.

#css #css3 #html-css #css-grids #learning-css #html-css-basics

The Ultimate CSS Grid Cheat Sheet in 2021🎖️

Let’s refresh Our CSS Grid Memory. Here’s a Cheat Sheet of everything you can do with Grid to get started in 2021!🎖️

#css #css3 #css-grid #learning-css #html-css #web-development #webdev