Start Simple with CSS Grid with Mondrian’s Art for Absolute Beginners

10 min readMar 6, 2024

About

Layouts play a pivotal role in crafting websites, offering both structure and beauty to our online spaces. In this article, we’ll dive into an accessible approach to designing website layouts using CSS Grid. We’ll begin by unraveling the fundamental concepts behind CSS Grid creation. Then, taking inspiration from the iconic Mondrian Art, we will apply these principles to construct a piece of art ourselves using CSS grid to guide us. In order to get started, you need a basic understanding of HTML/CSS.

Intro:

Whenever we visit a website, its layout is the first thing we notice. Creating such well-structured online spaces is quite a challenge due to the complex nature of web layouts. Among them, the ‘holy grail’ layout is particularly noteworthy for its design sophistication and functionality:

However, there’s a vast array of patterns found across different websites. For web developers and designers, organizing content across various page sections is a fundamental task. This organization is achieved through styling, which structures the content effectively. Historically, positioning elements on the screen involved a few key techniques. Initially, CSS floats were commonly used, followed by the adoption of Flexbox for more flexible layouts. Today, CSS Grid has become the preferred choice for many developers, offering unparalleled control and versatility in layout design. Let’s take a closer look at how CSS Grid operates and explore its capabilities.

Example 1:

Before we dive into the intricacies of CSS Grid, let’s set up a basic HTML and CSS foundation to apply our learning. Below, you’ll find an example of a div element acting as a parent container with the class name parent, and within it, six child div elements, each containing a paragraph tag. This setup is assumed to be placed within the body of an HTML file:

<div class="parent"> 
    <div class="item"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    </div>
    <div class="item"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    </div>
    <div class="item"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    </div>
    <div class="item"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    </div>
    <div class="item"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    </div>
    <div class="item"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    </div>
  </div>

For our css, all we have is the below applied:

html {
  height: 100%;
  width: 100%;
}

.item {
  background-color: lightgray;
  border: 2px solid black;
  
}

What we should see are six elements stacked on top of each other, arranged in the standard default layout.

Applying CSS grid to the parent

To transform the default layout above into a grid, we simply change the display property to ‘grid’. Then, we specify the number of columns we want by using the grid-template-columns property. For example, to create three columns of equal width, the syntax would be: grid-template-columns: 33% 33% 33%;:

html {
  height: 100%;
  width: 100%;
}

.parent {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}


.item {
  background-color: lightgray;
  border: 2px solid black;
  
}

Once you try this, you would have notice that your grid looks like the below:

Your default layout has now been transformed into a 2D grid with rows and columns, with each of your child elements automatically placed in its own cell. Indeed, each element really is in its own distinct cell. To further observe this, you can:

Open the inspector in your browser.
Navigate to the ‘Layout’ panel.
Check the options you wish to enable, such as ‘Show Track Sizes’ for displaying grid options.
Then, look for ‘Grid Overlays’ and select the parent div container where the grid was applied.

Here’s my setup in replit:

This really covers the basics, or the barebones, of using CSS Grid, but there’s a lot more you to it. For instance, if we want to create some space between the items on the grid, we can use the gap property. By applying gap, we introduce space between the grid items.

At this point, you might have noticed that our items are stretching beyond their intended bounds:

A common practice in CSS Grid is to use the fr unit, which allows columns to be sized in proportion to the viewport's size.

Here's an example

html {
  height: 100%;
  width: 100%;
}

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px; 
}


.item {
  background-color: lightgray;
  border: 2px solid black;
}

When we say that 1fr represents a fraction of the available space in the CSS Grid container, it means that the space inside the container is divided into parts based on the fr values assigned to the grid tracks (columns or rows). The available space is the total space inside the grid container minus any space taken up by margins, padding, or fixed-size tracks defined in other units (like pixels or percentages).
For 1fr: It signifies that a column or row should take up one share of the available space. If all tracks are set to 1fr, the space is divided equally among them.
For 2fr: This means that a column or row is allocated two shares of the available space. So, for example, if one track is 1fr and another is 2fr, the second track will be twice as wide (for columns) or tall (for rows) as the first, because it's taking up twice as many fractions of the available space.

Now try doing the below:

html {
  height: 100%;
  width: 100%;
}

.parent {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 20px; 
}

.item {
  background-color: lightgray;
  border: 2px solid black;
}

What you may have observed is that the first column, assigned 2fr, is now twice as wide as the other columns. Experiment with varying fr values to explore how they affect the layout. Dive in, experiment, and embrace your inner engineer.

Row and Columns in CSS Grid

The beauty of CSS Grid lies in its automatic placement of elements across columns and rows. Suppose we modify our previous scenario by removing one element, reducing our total from six to five.

  <div class="parent"> 
    <div class="item"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    </div>
    <div class="item"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    </div>
    <div class="item"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    </div>
    <div class="item"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    </div>
    <div class="item"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    </div>
  </div>

This adjustment showcases CSS Grid’s flexibility in handling an uneven number of elements.

Managing cells and spanning a cell across a full row

Now lets say I wanted to increase the font size of the top left cell.
To increase the font size of the top-left cell, simply target it using its selector. In the case since all selectors have the same name, you can use the :nth-child(1) selector on the parent class like this:

html {
  height: 100%;
  width: 100%;
}

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.item p {
  margin: 0;
}

.item {
  background-color: lightgray;
  border: 2px solid black;
  padding: 20px;
  font-size: 0.7rem;
  line-height: 1.7;
}

.item:nth-child(1) {
  font-size: 1.1rem; 
}

If you’ve noticed, the font size in the top-left cell has been increased to 1.1rem. This demonstrates the flexibility within CSS Grid, allowing for individual element modifications while maintaining the overall structure.

Suppose we want the top-left cell to extend across the entire row, achieving this necessitates using a span. For those who may not be familiar, span in CSS Grid terminology allows us to dictate how many rows or columns a cell should occupy. For instance, if we wish for our top-left cell to occupy two rows instead of one, we would apply grid-row: span 2; in our CSS. This directive ensures the cell expands to cover the space of two rows

.item:nth-child(1) {
  font-size: 1.1rem;
  grid-row: span 2; 
}

I can also turn the item itself into a grid and center the contents as well.

.item:nth-child(1) {
  font-size: 1.1rem;
  grid-row: span 2;
  display: grid; 
  align-content: center; 
}

Understand that each cell within the grid can be individually adjusted to meet specific requirements, enabling the creation of intricate and customized layouts.

Mixing Values

You can also utilize mixed values with grid-template-columns, as shown below, where we specify 500px 1fr 1fr. This means we want the far-left column to be 500px wide, and the remaining space is divided equally between the other two columns.

.parent {
  display: grid;
  grid-template-columns: 500px 1fr 1fr;
  gap: 20px;
}

Grid Line-based Placement

In the context of CSS Grid, adjusting an element’s row span to 1 / 3 signifies a technical modification where the element is configured to stretch from the grid's first row line to the third, effectively covering two grid rows. This precise control allows for dynamic layout adjustments, enabling designers to specify exactly how content should flow and occupy space within the grid structure, showcasing the powerful flexibility inherent in CSS Grid for complex layout designs.

The technique of specifying how an element spans multiple rows or columns in a CSS Grid layout is known as “Grid Line-based Placement.” This method involves defining an item’s start and end positions along the grid lines, allowing for precise control over the item’s placement and span within the grid.

.item:nth-child(1) {
  font-size: 1.1rem;
  grid-row: 1/3;
  align-content: center; 
}

For our example, it would look like this

Using CSS Grid is quite straightforward, as demonstrated. By wrapping elements in a parent container and setting its display to grid, the elements automatically arrange themselves in a 2D format. This setup allows us to manipulate the cells within the grid as needed, utilizing properties like grid-row, span, and grid-template-columns, among others. I encourage you to spend some time practicing these concepts. Now, let's transition to the abstract art portion of this article, where we'll apply what we've learned in a creative context.

Abstract Art Practice

Here is some prework that I did and I recommend for you:

Below I have images of the grid lines i drew up for being able to visual the number of rows and colums for my grid. Then i labeled each cell in the grid. One thing that is missing are numbers to figure out how much space any particualr cell would take based on the image

Here is the HTML/CSS:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="parent">
    <div class="grid-item one_red"> </div>
    <div class="grid-item two_white">  </div>
    <div class="grid-item three_white"> </div>
    <div class="grid-item four_white"> </div>
    <div class="grid-item five_yellow">  </div>
    <div class="grid-item six_white">  </div>
    <div class="grid-item seven_blue">  </div>
    <div class="grid-item eight_white"> </div>
    <div class="grid-item nine_white"></div>

  </div>
</body>

</html>

html, body {
  height: 100%;
  width: 100%;
  position: relative;
}

.parent {
  position: absolute;
  top: 10%;
  left: 10%;
  height: 75%;
  width: 75%;
  display: grid;
  grid-template-columns: 10% 30% 30% 30%;
  grid-template-rows: 40% 25% 25% 10%;
  border: 5px solid black; 
}

.grid-item {
  background-color: lightgray;
  border: 5px black solid;
}

.grid-item.one_red {
  background-color: #B33A27;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.grid-item.two_white {
  background-color: #F6F5F6;
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

.grid-item.three_white {
  background-color: #F6F5F6;
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

.grid-item.four_white {
  background-color: #F6F5F6;
  grid-column: 3 / 5;
  grid-row: 2 / 3;
}

.grid-item.five_yellow {
  background-color: #F0C432;
  grid-column: 1 / 2;
  grid-row: 3 / 5;
}

.grid-item.six_white {
  background-color: #F6F5F6;
  grid-column: 2 / 3;
  grid-row: 3 / 5;
}

.grid-item.seven_blue {
  background-color: #2C395E;
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

.grid-item.eight_white {
  background-color: #F6F5F6;
  grid-column: 4 / 5;
  grid-row: 3 / 5;
}

.grid-item.nine_white {
  background-color: #F6F5F6;
  grid-column: 3 / 4;
  grid-row: 4 / 5;
}

Enjoy!

Start Simple with CSS Grid with Mondrian’s Art for Absolute Beginners

About

Intro:

Example 1:

Abstract Art Practice

Written by Caston Boyd