Grid layouts

Grid layouts aren't limited to living inside of a <DIV>. We can put them inside lists, too: Unordered lists <ul> and and ordered lists <ol> are both good candidates for this approach. Let's take a look at how this works...

Plain <ul>

Every letter below is just another <li>:

<ul>
	<li> A. </li>
	<li> B. </li>
	<li> C. </li>
</ul>

Gridded <ul>

In this example, I've added a class, "gridContainer", to the unordered-list selector, so that the HTML looks like this:

 <ul class="gridContainer"> 

And in the .CSS, I've added the following:

 .gridContainer{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap:10px;
	background-color:gainsboro;
	list-style: none;
}

That last line of the class is a property that keeps an outline from using bullet-points. Very handy.


Manipulating the grid from here is easy. You'll likely want to edit the .gridContainer class I created in the .CSS.

Start by changing it from a 3-column grid to a 2-column grid.

Then change it from a grid with 2 columns of uniform width to a grid with 4 columns, all of different widths. Try mixing up your units of measure: px, em, %, vw.