From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Creating a grid

Creating a grid - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Creating a grid

“

- [Chris] Hi, this is Chris Converse, and in this episode, we'll create a grid layout within our content by reassigning HTML elements to display as a table, without actually using a table in the page. Then we'll remove those table properties, allowing us to reconfigure the layout for small screens. So if you'd like to follow along with me, download the exercise files, and let's begin by opening index.html in a text editor. And once you have the HTML file open, up in the head area, you'll see we have a link to style.css, which we'll open in a few minutes. Inside of the body area, we have a main article element. Inside of the article element is an h1, a paragraph, and a section element. It's this section element that we're going to convert into a table, and we're going to make all of the div elements, there are four inside of here, into the individual table cells. So, the first thing we'll need to do in the HTML is group these so that we can create rows out of these individual divs. So…

Contents