How To Lay-out List Items Like A Grid With Css And Html?

March 31, 2024 Post a Comment

I have a div block which does not have a fixed width. Inside, I have an

..
items to be listed ins

Solution 1:

The "Inline Blocks" link that Jordan posted is a great resource, particularly when it comes to older browser support. For quick reference for others landing on this page off of google, the basic css for creating a centered, inline-block grid is:

ul {
    margin: 0 auto;
    text-align: center;
}

li {
    display: inline-block;
    vertical-align: top;
}

Solution 2:

The simplest solution is to use CSS columns:

http://jsfiddle.net/6tD2D/ (prefixes not included)

ul {
    columns: 3;
}

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
</ul>

This will equalize the columns as best it can. However, if there aren't enough elements to be perfectly equal, it will start removing them from the right instead of the center.

Solution 3:

According to this StackOverflow question, Inline Blocks may be just what you need.

Oh, and if you aren't implementing it already, be sure to look into CSS Grids, too. If you don't want to build a CSS grid yourself, this one is fantastic.

Solution 4:

CSS

ul {
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-auto-rows: 1fr; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  gap: 0px0px; 
  grid-template-areas: 
    "col1-item1 col2-item1 col3-item1""col1-item2 col2-item2 col3-item2""col1-item3 col2-item3 col3-item3""col1-item4 col2-item3 col3-item4"; 
}

/* Assign a class to each li *//* Column 1 */.col1-item1 { grid-area: col1-item1; }
.col1-item2 { grid-area: col1-item2; }
.col1-item3 { grid-area: col1-item3; }
.col1-item4 { grid-area: col1-item4; }
    /* Column 2 */.col2-item1 { grid-area: col2-item1; }
.col2-item2 { grid-area: col2-item2; }
.col2-item3 { grid-area: col2-item3; }
    /* Column 3 */.col3-item1 { grid-area: col3-item1; }
.col3-item2 { grid-area: col3-item2; }
.col3-item3 { grid-area: col3-item3; }
.col3-item4 { grid-area: col3-item4; }

HTML

<ul><!-- Column 1 --><liclass="col1-item1">col1 item 1</li><liclass="col1-item2">col1 item 2</li><liclass="col1-item3">col1 item 3</li><liclass="col1-item4">col1 item 4</li><!-- Column 2 --><liclass="col2-item1">col2 item 1</li><liclass="col2-item2">col2 item 2</li><liclass="col2-item3">col2 item 3</li><!-- Column 3 --><liclass="col3-item1">col3 item 1</li><liclass="col3-item2">col3 item 2</li><liclass="col3-item3">col3 item 3</li><liclass="col3-item4">col3 item 4</li></ul>

Here is the fiddle: https://jsfiddle.net/omarjuvera/p3wajehs/2/ And also you can run the code here

ul {
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-auto-rows: 1fr; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  gap: 0px0px; 
  grid-template-areas: 
    "col1-item1 col2-item1 col3-item1""col1-item2 col2-item2 col3-item2""col1-item3 col2-item3 col3-item3""col1-item4 col2-item3 col3-item4"; 
}

/* Assign a class to each li *//* Column 1 */.col1-item1 { grid-area: col1-item1; }
.col1-item2 { grid-area: col1-item2; }
.col1-item3 { grid-area: col1-item3; }
.col1-item4 { grid-area: col1-item4; }
  /* Column 2 */.col2-item1 { grid-area: col2-item1; }
.col2-item2 { grid-area: col2-item2; }
.col2-item3 { grid-area: col2-item3; }
  /* Column 3 */.col3-item1 { grid-area: col3-item1; }
.col3-item2 { grid-area: col3-item2; }
.col3-item3 { grid-area: col3-item3; }
.col3-item4 { grid-area: col3-item4; }

<ul><!-- Column 1 --><liclass="col1-item1">col1 item 1</li><liclass="col1-item2">col1 item 2</li><liclass="col1-item3">col1 item 3</li><liclass="col1-item4">col1 item 4</li><!-- Column 2 --><liclass="col2-item1">col2 item 1</li><liclass="col2-item2">col2 item 2</li><liclass="col2-item3">col2 item 3</li><!-- Column 3 --><liclass="col3-item1">col3 item 1</li><liclass="col3-item2">col3 item 2</li><liclass="col3-item3">col3 item 3</li><liclass="col3-item4">col3 item 4</li></ul>

Html5 Pros