CSS-Doodle Course - CSS Grid

CSS-Doodle Course - CSS Grid
In this tutorial, we will continue to work on our first CSS-Doodle project. We have set up our startup file using the online p5.js Editor in the last tutorial. Now, we will learn about the CSS Grid.

CSS-Doodle Course - The Grid

The Grid

If repeat patterns are a part of your design process, you know that a pattern is created by repeating a seamless tile across the canvas. Your design elements will be inside this repeat tile. That's exactly how CSS-Doodle makes patterns. It all starts with a grid of empty squares, called cells, that we will use as our canvas. As the creative coder, you will control the number and size of the grid cells and also the design elements inside the cells. CSS-Doodle does all of this using the CSS Grid Layout Module, which is a way to control how design elements are displayed on a webpage by using columns and rows.

Let's go to your p5.js Editor account and open the CSS-Doodle Course - Startup File sketch from the last tutorial. As you can see, we already have both the <css-doodle> tag and :doodle {} selector added to the code, along with a title and copyright notice within the HTML code.

<!-- css doodle tag and selector -->
:doodle {

Click on the red Play button (see screenshot) at the top of the code window to see what will happen in the Preview window. You will see just the title and copyright text. Why? Because we haven't put any code inside the <css-doodle> tag and :doodle {} selector. To make the grid visible on the canvas, we need to do four things.

  • Set the background color for the grid cells using the CSS background property

  • Set the width and height of the grid using the @size property

  • Set the number of rows and columns in our grid using the @grid property

  • Set the size of the gap or empty area between grid cells using the CSS grid-gap property

CSS Background Property

/* CSS background property */
background: color;

For the background color for our grid, we can use the CSS background property to set the color. As the background of the web browser is white by default, the background color for our grid cells needs to be any color except white. We will set the background color parameter to black using the HTML color code #000000.

The Doodle-Specific @size Property

/* @size property */
@size: width height;

Now we can set the overall size of the grid using the @size property. Notice the @ before the property name, which tells us that this is a special property created for CSS-Doodle. We will set the size of the canvas grid to 400 pixels high and wide. As you can see from the example below, the @size property takes a value for both the width and the height parameter and we can use various units of measurements for the web such as pixels (@size: 400px 400px;). However, when the width and height are the same, we can shorten the syntax to just one value (@size: 400px;).

The Doodle-Specific @grid Property

/* @grid property */
@grid: rows x columns;

We will also want to set the number of grid rows and columns. We will use another doodle-specific property called the @grid property. The number of rows will be the first parameter listed and the number of columns is listed next. Let's set up our grid to have 10 rows and 10 columns.

The CSS Grid-Gap Property

/* CSS grid-gap property */
grid-gap: number;

If you click the Run button, you will see a black square drawn on the canvas but you can't see the individual cells in the grid. To see the cells, we need to put an empty space, or gap, between each cell using the CSS grid-gap property. We will set the grid-gap parameter to 1 pixel.

Well, that's all the code needed to display the grid on the webpage. In the next tutorial, we will add this code to our CSS-Doodle project.

Creating Code Art with CSS-Doodle - Tutorial Series Index

CSS-Doodle Copyright (c) Yuan Chuan. Licensed under the MIT License. CSS-Doodle Documentation.
Screenshots used by permission. Processing (Java), p5.js (JavaScript) and Processing.py (Python) are software projects created by the Processing Foundation.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2019 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.