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!
See the Pen Styling the last row of a grid with CSS selectors by Keith Clark (@keithclark) on CodePen.
About the Code
Styling the last row of a grid with CSS selectors
How to style the last row of a grid without knowing the number of elements it will contain using CSS selector trickery.
More info: Link
Dependency: –
See the Pen Grid Animation Effects by Trang Si Hung (@trangsihung) on CodePen.
About the Code
Grid Animation Effects
small and simple walkthrough showcasing the usage of jQuery .delay(), jQuery easing plugin, and CSS3 transforms to animate some thumbnails in a grid.
On clicking the animate button the thumbnails disappear randomly with a ripple effect and quickly storm back in from the left in a cool 3D way.
More info: Link
Dependency: –
See the Pen Simple grid mixin by Aleksandar Gosevski (@goschevski) on CodePen.
About the Code
Simple grid mixin
This grid is possible to:
- be responsive
- have paddings
- vertically center columns
- stay fluid on small resolutions
- kill paddings on the first and last column
More info: Link
Dependency: –
See the Pen Simple Grid CSS Grid by Paul Maloney (@paulmaloney) on CodePen.
About the Code
Simple Grid CSS Grid
This is a really simple CSS only grid using CSS Table Display. The plan was to make it as lightweight as possible whilst keeping it responsive.
More info: Link
Dependency: –
See the Pen Simple CSS Grid Hover by Boomer (@CodeBoomer) on CodePen.
About the Code
Simple CSS Grid Hover
A simple grid hover effect with > 50FPS for entire cycle.
For this effect, multiple box-shadows are applied to the :before pseudo element of the grid item to give a sence of depth. To ensure we achieve performant transitions, we don’t want to animate the box-shadow but instead the opacity of the :before pseudo element.
We also translateY the grid-item a desired amount (depending on size of grid-item) and add this transition to the hover state. I use a SASS mixin to account for 3D translates where possible, hense I don’t specifically use translateY.
The combined effect of the ‘lifting’ grid-item as well as the box-shadows, gives a pretty neat, yet simple 3D-like effect. Most importantly, you get near 60FPS. If you add scale effects or choose to animate the box-shadow, the effect is better but you risk janky animations on mid to lower-end computers without a GPU.
The secret sauce here is adding multiple box-shadows to give the desired depth effect to meet your need. If you have images on the grid, you will want to darken the shadows more.
More info: Link
Dependency: –
See the Pen Simple css Grid – Responsive by Jermbo (@jermbo) on CodePen.
About the Code
Simple css Grid – Responsive
Everywhere I looked there are a ton of grid systems out there. Some of them are really nice. I wanted something short simple and to the point. This isn’t meant to be something crazy robust or used by everyone. For a lot of the sites, I build I have to create my own grid system every time, so I figured I would do some math and utilize the power of a preprocessor.
More info: Link
Dependency: –
See the Pen css Grid system by Alex (@VoloshchenkoAl) on CodePen.
About the Code
Simple css grid system using scss
Can create your grid system with another number of columns simply change $numColumns in SCSS
More info: Link
Dependency: –
See the Pen Super Simple CSS Grid by Stacy(@stacy) on CodePen.
About the Code
Super Simple CSS Grid
This is a very basic grid controlled only by CSS. It keeps the HTML more semantic and if your page templates are fairly basic then it may be the perfect grid for you .
More info: Link
Dependency: –
See the Pen 3D Grid UI by carvadraws (@acarva1) on CodePen.
About the Code
3D Grid UI
Testing a simple grid system using a skewed table. Try holding Ctrl or Shift.
More info: Link
Dependency: –
See the Pen Aspect ratio Grid boxes with CSS Variables by Michelle Barker (@michellebarker) on CodePen.
About the Code
Aspect ratio Grid boxes with CSS Variables
I noticed that using the CSS aspect ratio hack was causing weird behaviour with CSS Grid (when I needed all boxes to be the same aspect ratio but fill different numbers of rows / columns) so this is a solution with CSS Variables and a sprinkling of calc() instead
More info: Link
Dependency: –
See the Pen Simple Grid template by Nicolas Tilly (@nicolastilly) on CodePen.
Leave a Reply