image
image

Easy Grid

CSS Grid made easy

A powerful array of features achievable via simple and minimal settings

Yes - you do need another grid / columns stack 😊

Easy grid is based on the incredible CSS grid specification and allows you to create dynamic or fixed grid and column layouts with (as the name suggests) ease!
As we go through the features ask yourself:
Can my existing grid/columns solution can do these things at all (never mind with ease!)?

Examples

Dynamic columns

Out of the box, with a single default setting, Easy Grid enables a fully dynamic, responsve grid.

Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item

The amount of columns is dictated by the available width (of the container or browser window) and the minimum width that we allow the columns to be. Resize the browser window to see the number of columns dynamically change!

Fixed grids

If you would rather specify how many columns you want to have at each breakpoint then that can be done too. And again with complete ease.

Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item

Here we are showing the default set up for fixed grids: 1 column on small screens, 2 on medium, 3 on large and 4 on extra large.

Control 'block' alignment

If the content of each grid item varies in height then you can specify how you want to handle that. The Easy Grid default is to equalise the height of each item in the row to match the tallest but you can set it to do other things too....

Fill (default)

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Top

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Centre

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Bottom

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Control item content alignment

When there is available height in a grid item then you can specify how you want any content within that grid item to be vertically aligned.

Top

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Centre

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Bottom

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Space between

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Which makes things like getting buttons aligned etc an absolute breeze....
Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Grid item

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Grid item

Lorem ipsum.

Style until your heart is content

Grid items styling can be set up in the parent grid (to automatically apply to all grid items) and can be overridden on an item by item basis.

Set up background colours, images, padding, drop shadows, borders and more!

Background colours
Background images
Borders

And a few extra tricks....

There is built-in 1-click support to make your grids a little more interesting!!

First item (2 cols)

1
2
3
4
5
6
7
8
9
10
11
12

Setting up the first item to be a 'feature item' by spanning 2 columns can be a nice option.

First item (2 cols & 2 rows)

1
2
3
4
5
6
7
8
9
10
11
12

Setting up the first item to be a more prominent 'feature item' by spanning 2 columns and 2 rows can be an even nicer option.

Even items (2 cols)

1
2
3
4
5
6

If you set the grid to have 3 columns you get a nice orderly split with columns like this.

Odd items (2 cols)

1
2
3
4
5
6

If you set the grid to have 3 columns you get a nice orderly reverse split with columns like this.

First & Fourth (2 cols)

1
2
3
4

This can be a nice option for a section if 4 grid items are used so that it uses both split column layouts.

Every third (2 cols)

1
2
3
4
5
6
7
8
9

Here every third grid item spans 2 columns. How this behaves can be controlled by how many columns are used.

Every third - with offset (2 cols)

1
2
3
4
5
6
7
8
9
10
11
12

Here every third grid item (starting with the 2nd item) spans 2 columns. When used with 4 columns this gives us a nice wide central column.

Random(ish)

1
2
3
4
5
6
7
8
9
10
11

Here we are setting even items to span 2 columns again - but this time we are using 4 columns to give a more random looking grid!

Get Index.php

You can get this stack on its own or as part of our hugely discounted stacks bundle.

Our stacks bundle includes Index.php and ALL of our other stacks that are currently available. Buying as a bundle offers huge savings compared to buying the stacks separately. Currently the bundle consists of the following stacks:

  • Easy Grid ↗
  • Content Filter ↗
  • Grid Enabler ↗
  • Magic Mouse ↗
  • Magic Mouse 2 ↗
  • Markdown Link ↗
  • Parallaxer ↗
  • Scroller Plus ↗
  • Source Addons ↗
  • Splider 2 ↗

Over 60% off!

image

Stacks bundle

Our stacks bundle includes ALL of our stacks in one incredible bundle dea (along with an exclusive project file)!

BOGOF: Add this and the Source projects bundle to the cart to get 1 of them for FREE!

Automatically applied during checkout

Buy for

usd

Buy for

eur

Buy for

gbp

FAQs

Below are some of the most common questions about this and our other stacks.

Stack FAQs

There are no specific FAQs for this stack at this time. See our general FAQs below. If you have a particular question about this stack then please get in touch.

General FAQs

Yes this stack has been designed to work in any framework. If you encounter any issues then please contact us with an example and we will do our best to resolve.

All our stacks use only local resources, collect no data and include no calls to remote servers or CDNs etc. As such the stacks are completely GDPR compliant.

We have a full supporting Knowledge Base including articles for all of our stacks and settings. If you can’t find what you need there then do not hesitate to reach out to us via your preferred channel.

The whole site has been built with Source micro framework. In addition, this page also uses (obviously). Finally, this FAQ section has been built with Toggle stack and the Bundle details section above uses Moreish stack.

Source Icon

Built with Source