Can html list items (li) be set to display: grid?

Question

For example I am trying to create a footer with 4 links spaced evenly with the following code

footer{
    margin-top: 20px;
    border-top: 1px solid #eeeeee;
    border-radius: 2px;

}
#footer_list{
    display:inline-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

    list-style-type: none;
}
.footer_list_item{
    color: #001f3f !important;
}

<footer>
    <ul id="footer_list">
        <li class="footer_list_item">A Blah Blah Production</li>
        <li class="footer_list_item">Phone: xxx-xxx-xxxx</li>
        <li class="footer_list_item">Email: support@company.com</li>
        <li class="footer_list_item" href="#">Career Info</li>
    </ul>
</footer>

http://jsfiddle.net/vq9b7c0e/3/

Is setting a list to display:grid invalid? As all of the items seem to be randomly spaced

score 0 · Answer 1 · edited Jul 12 '18 at 06:43

Dont use "href" in <li>

I do not know exactly what is going on, but it may help you -

footer{
    margin-top: 20px;
    border-top: 1px solid #eeeeee;
    border-radius: 2px;

}
#footer_list{
    display:inline-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
    list-style-type: none;
}
.footer_list_item{
    color: #001f3f !important;
}
.footer_list_item a {
     word-break: break-all;
}

<footer>
    <ul id="footer_list">
        <li class="footer_list_item">A Blah Blah Production</li>
        <li class="footer_list_item">Phone: xxx-xxx-xxxx</li>
        <li class="footer_list_item">Email: <a href="#">support@company.com</a></li>
        <li class="footer_list_item"><a href="#">Career Info</a></li>
    </ul>
</footer>

http://jsfiddle.net/qhv40j1d/

score 0 · Answer 2 · answered Jul 12 '18 at 03:03

Setting an HTML element to display: grid (or inline-grid) is perfectly valid.

According to the W3C definition, the display property applies to all elements.

However, some elements don't play well in some browsers with changes to the display property. See this post (which applies to flex and grid): Flexbox not working on button or fieldset elements

You wrote:

Is setting a list to display: grid invalid? As all of the items seem to be randomly spaced.

Your items are not randomly spaced. The grid has four equal width columns, just like you specified:

Your code:

#footer_list{
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

Your layout (as seen in Chrome, Firefox and Edge):

So I'm not sure what you mean. But here's a simplified version of your code. Since you're already using the HTML5 footer element, which provides meaningful semantics, why the ul?

footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 40px;
  grid-column-gap: 5px;
}

a {
  color: #001f3f !important;
  text-decoration: none;
  border: 1px solid lightgray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .9em;
}

<footer>
  <a href="#">A Blah Blah Production</a>
  <a href="#">Phone: xxx-xxx-xxxx</a>
  <a href="#">Email: support@company.com</a>
  <a href="#">Career Info</a>
</footer>

Can html list items (li) be set to display: grid?

2 Answers2

jsFiddle demo