Ul in two columns, which one (or multiple) li's being full width-CodePudding

In my demo below, I'm trying to make .list__li--first span the width of the two columns.

.list{
  max-width: 400px;
}

.list__ul{
  list-style-type: none;
  columns: 2;
}

.list__li{
  margin-bottom: 10px;
  display: block;
}

.list__li--first{
  width: 100%;
}

<div >

  <ul >
    <li >Label</li>
    <li >Link</li>
    <li >Link</li>
    <li >Link</li>
    <li >Link</li>
    <li >Link</li>
    <li >Link</li>
  </ul>

</div>

"label" should sit on top of the "links". width: 100% doesn't work and I can't see any solutions which also involves columns?

CodePudding user response：

CSS-Grid can do that:

.list {
  max-width: 400px;
  border: 1px solid grey;
}

.list__ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.list__li {
  margin-bottom: 10px;
  display: block;
}

.list__li--first {
  grid-column: span 2;
  border: 1px solid red;
}

<div >

  <ul >
    <li >Label</li>
    <li >Link</li>
    <li >Link</li>
    <li >Link</li>
    <li >Link</li>
    <li >Link</li>
    <li >Link</li>
  </ul>

</div>

CodePudding user response：

I would make the label associated with the text on the list div. See below.

.list{
  max-width: 400px;
}

.list__ul{
  list-style-type: none;
  columns: 2;
}

.list__li{
  margin-bottom: 10px;
  display: block;
}

<div >Label

  <ul >
    <li >Link</li>
    <li >Link</li>
    <li >Link</li>
    <li >Link</li>
    <li >Link</li>
    <li >Link</li>
  </ul>

</div>