CODEWITHSUNDEEP
htmlcss
Phil
Phil

Reputation: 14641

How to lay-out list items like a grid with CSS and HTML?

I have a div block which does not have a fixed width.

Inside, I have an <ul> <li>..</li> block with 11 items. I would like these <li> items to be listed inside the div, all with equal widths like this:

##item##  ##item##  ##item##
##item##  ##item##  ##item##
##item##  ##item##  ##item##
##item##            ##item##

However, I can't sort it out at all.

I tried float left and right but the central 3 elements will not be centered.

What can I do to get this working?

Thanks!

Upvotes: 17

Views: 81156

Answers (4)

Omar Juvera
Omar Juvera

Reputation: 12287

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: 0px 0px; 
  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 -->
    <li class="col1-item1">col1 item 1</li>
    <li class="col1-item2">col1 item 2</li>
    <li class="col1-item3">col1 item 3</li>
    <li class="col1-item4">col1 item 4</li>

    <!-- Column 2 -->
    <li class="col2-item1">col2 item 1</li>
    <li class="col2-item2">col2 item 2</li>
    <li class="col2-item3">col2 item 3</li>

    <!-- Column 3 -->
    <li class="col3-item1">col3 item 1</li>
    <li class="col3-item2">col3 item 2</li>
    <li class="col3-item3">col3 item 3</li>
    <li class="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: 0px 0px; 
  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 -->
  <li class="col1-item1">col1 item 1</li>
  <li class="col1-item2">col1 item 2</li>
  <li class="col1-item3">col1 item 3</li>
  <li class="col1-item4">col1 item 4</li>

  <!-- Column 2 -->
  <li class="col2-item1">col2 item 1</li>
  <li class="col2-item2">col2 item 2</li>
  <li class="col2-item3">col2 item 3</li>

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

Upvotes: 1

cimmanon
cimmanon

Reputation: 68319

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.

Upvotes: 30

FreedomMan
FreedomMan

Reputation: 443

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;
}

Upvotes: 32

Jordan Thornquest
Jordan Thornquest

Reputation: 1136

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.

Upvotes: 4

Related Questions