Positioning Data in Rows and Columns Using CSS

Introduction:
For those of you who are just starting out with HTML and CSS (like me), you’ll find that being able to put data on your webpage into a two dimensional table with rows and columns can be very useful. Whether your website stores a lot of stats, various other types of categorizable data, or you just need a one-off table for something, using CSS (Cascading Style Sheets) to create rows and columns can help you achieve a website that works for your needs. CSS is what web developers use to make their websites come to life and not just look like a plain text document.

Using HTML on its own isn’t really practical for making engaging, user-friendly websites. If you want a website that is more appealing than just what the structural elements of HTML can provide, then learning how to give style to your site using CSS will be paramount.

By the end of this tutorial, you will be able to use CSS to create a table or grid, with rows and columns, to organize data. There are several different CSS methods you could use to accomplish this task, including Flexbox, float, CSS Grid, etc. In this tutorial, I will be demonstrating how to use CSS Grid.

Step 1: Setting Up the Basic Grid

The first thing we’ll need to do is create the actual HTML structure that will become our table. We can do this by setting up a simple div element and populating it with some data.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
</div>

Notice that I created two classes and listed them as attributes within the div elements. Specifically, “grid-container” in the class I created for the parent element of the table, and “grid-item” is a class I use for each item in my table. In the following steps, we’ll use these classes to set up our CSS stylings.

Here is what our site looks like without any CSS:

Step 2: Create the Class Selector Definitions

Now that we have some HTML structure in place, it’s time to define the CSS class selectors assigned to the above div elements. We can do that like this:

.grid-container {
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; 
}

.grid-item {
  background-color: #f4f4f4;
  padding: 20px;
  text-align: center;
  border: 1px solid #ccc;
}

In the .grid-container selector, the display property defines our grid-like container. The grid-template-columns property created 3 equal width columns. The gap property dictates how much space will be between each item in the table.

In the .grid-item class selector, the background-color property sets the background color of the element(s) assigned to that class. The padding property defines how much space will be between each item. The text-align property sets the text alignment in the corresponding HTML elements to center. The border property defines a border around each item in the table.

Now, we have a table with 3 columns and 2 rows to store our data in. If you need more columns or rows, or if you want to adjust any of the property values in the CSS selectors, feel free.

Here is what our site should currently look like:

Step 3: Specific Column/Row Positioning

If you need certain items in specific positions in the table, there is a way you can use CSS selectors to specify where in the table a certain item should be placed. It’s called the nth-child selector. We can use it like this:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item:nth-child(1) {
  grid-column: 2; /* Place in the second column */
  grid-row: 1;    /* Place in the first row */
}

.grid-item:nth-child(2) {
  grid-column: 1; /* Place in the first column */
  grid-row: 1;    /* Place in the first row */
}

.grid-item:nth-child(3) {
  grid-column: 3; /* Place in the third column */
  grid-row: 2;    /* Place in the second row */
}

.grid-item:nth-child(4) {
  grid-column: 2; /* Place in the second column */
  grid-row: 2;    /* Place in the second row */
}

In this example, the CSS comments specify which position the item will be placed into depending on how the grid-column and grid-row properties are defined. You can adjust these values as needed.

The code above will change the position of some table items so that our site now looks like this:

Step 4: Adjusting the Table Based on Screen Size

If you want your website to auto-adjust to different screen sizes, you can easily do that with the @media query CSS selector:

@media (max-width: 768px) { 
  .grid-container { 
    grid-template-columns: 1fr; /* Change to a single column */ 
  } 
}

This will change your table into one with a single column if the screen size is less than 768 pixels. However, for this to work, you also need to add the following meta tag into head section of your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Common Issues with CSS Tables:

You should now have a fully functioning table on your website styled by CSS. If you’re having any troubles, here are a couple common issues to troubleshoot as well as some additional resources with more information about using CSS to create tables.

If the table items are not aligning properly, you may need to play with values for the grid-template-columns and grid-template-rows properties. You can also adjust the value of the gap property if it needs to be.

If the grid items are overflowing, use the min-width or max-width properties to control the size of the parent container or the individual table items’ containers.

Additional Resources

1) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
This is a web doc produced by Mozilla Developer Network. It has in depth explanations of how to use the CSS Grid method to create/style tables. It also has walkthroughs of each of the different CSS properties you can use to style your table in different ways, which can be helpful to beginners and advanced web developers.

2) https://css-tricks.com/snippets/css/complete-guide-grid/
This is a guide from CSS Tricks that also walks through how to use the CSS Grid method. It’s particularly helpful because it has a lot of code snippets and use case examples.

3) https://gridbyexample.com/
This website is dedicated to the CSS Grid method. It is maintained by Rachel Andrew, and contains videos, snippets, and examples to help you really understand what you can accomplish with the CSS Grid method.

4) https://www.w3schools.com/css/css3_flexbox.asp
If you want to use the CSS Flexbox Layout to help create your table/grid, this is a great tutorial on how to implement Flexbox from W3Schools. It is particularly useful for one-dimensional layouts, but if you want a two-dimensional table, you should use the CSS Grid. Flexbox is great for flexible, responsive designs.

5) https://dev.to/devsyedmohsin/22-useful-css-tips-and-tricks-every-developer-should-know-13c6
If you are wanting to increase your CSS skill set in general, this is a great article on Dev Community detailing “22 Useful CSS Tips Every Developer Should Know.” It also talks about using CSS Grid, but also has many other tips and tricks for creating an awesome website. One of my favorite tricks they showcase is how to change your writing mode to sideways to create visually appealing headers.