Grid By Example


See the Pen Grid by Example 11: Defining Grid Areas by rachelandrew (@rachelandrew) on CodePen. This is a project by Rachel Andrew. Take a look at some of the other things I make. Perch CMS - the original Really Little CMS. Designed for speed and simple implementation.

  1. Grid By Example Css
  2. Grid Layout In Css
  3. Grid By
  1. Part of my Grid by Example free video series, we take a look at the keywords auto-fill and auto-fit.
  2. Example of a calendar created using CSS Grid Layout. The days are added with JavaScript and only the column of the first day is set (depending on the day of the week) and the rest of them are placed automatically. If you double-click in the page, the alignment of the days numbers is changed.
  3. In some cases, you might want to display your items as a grid rather than a normal list of items that come one after the next. For this task, use the GridView widget. The simplest way to get started using grids is by using the GridView.count constructor, because it allows you to specify how many rows or columns you’d like.

Defining the CSS Grids

To define a basic CSS grid, we place display: grid on an element. Where would it make sense to do this? Well, our main content area has 2 columns, and the footer area has 3:

The top grid has 1 row, and 2 columns. The bottom grid (when we have 6 different <li> elements ) has 2 rows and 3 columns.


Let's add a CSS grid to the top content area:

The grid-template-columns property defines the number of columns which is done by defining a value, separated by a space. Each value and space signifies another column.

Grid By Example

Let's define the footer grid elements:

Rachel andrew css

Grid By Example Css

This time, we used repeat(), which is a quick way of saying: grid-template-columns: auto auto auto

We also added grid-template-rows which works in the same way as columns, except it simply defines the rows.

Grid Layout In Css

Try experimenting with these values! What if you wanted 2 columns and 3 rows?, simply reverse the 3 and the 2 from the above ruleset.

Grid By

Also, what if we wanted to center our graphic? The CSS grid allows children or items to be aligned quite easily. You can use justify-self to position items: