Skip to content Skip to sidebar Skip to footer
Home / Css / Html

How To Create A Sectioned Grid/list With
  • And
    With Html/css?

    • Post a Comment
    I am trying to create a grid from a html
      list where the grid is supposed to be divided into sections by a
      after x-number of
    • items. My html list loo

    Solution 1:

    To achieve this you would have to change your CSS as follows:

    .sortable li {
  display: block;
}

.item {
  min-width: 150px;
  border: 1px solid black;
  margin-right: 15px;
  padding: 5px;
  float: left;
}

.break {
  width: 25%;
  clear: both;
  padding: 10px;
}
    <!DOCTYPE html>
<html>

  <head>
    <title>Sectioned List</title>
  </head>

  <body>
    <ul class="sortable">
      <li class="item">item 1</li>
      <li class="item">item 2</li>
      <li class="break">
        <hr>
      </li>
      <li class="item">item 3</li>
      <li class="item">item 4</li>
      <li class="break">
        <hr>
      </li>
      <li class="item">item 5</li>
    </ul>
  </body>

</html>
    This basically remove the float to the <li> item and add some padding to the <li> break element. See fiddle here

    Solution 2: 

    .sortable li {
  display: inline-block;

}
.sortable {
      max-width: 500px;
    padding: 0;
    display: inline-block;
}

.item {
  max-width: 45%;
    width: 100%;
    border: 1px solid black;
    padding: 5px;
    float: left;
    margin-left: 1%;
}

.hr {
  width: 90%;
  clear: both;
  padding: 10px;
}
    <!DOCTYPE html>
<html>

  <head>
    <title>Sectioned List</title>
  </head>

  <body>
    <ul class="sortable">
      <li class="item">item 1</li>
      <li class="item">item 2</li>
      <li class="hr"><hr></li>
      <li class="item">item 3</li>
      <li class="item">item 4</li>
      <li class="hr"><hr></li>
      <li class="item">item 5</li>
      <li class="item">item 6</li>
      <li class="hr"><hr></li>
      <li class="item">item 7</li>
      <li class="item">item 8</li>
      <li class="hr"><hr></li>
    </ul>
  </body>

</html>

    Solution 3:

    I haven't centered the hr but this is the basic idea

    li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}
.line{
  width:75%;
}
ul {
    list-style-type: none;
    clear: both;
}

.item {
  min-width: 150px;
  border: 1px solid black;
  margin-right: 15px;
  padding: 5px;
}
    <ul>
   <li class="item">item 1</li>
   <li class="item">item 2</li>
 </ul>
<ul>
      <li class="line"><hr></li>
</ul>
  <ul>
   <li class="item">item 3</li>
   <li class="item">item 4</li>
  </ul>
      <ul>
      <li class="line"><hr></li>
      </ul>
   <ul>
   <li class="item">item 5</li>
  </ul>

    You may like these posts

    Post a Comment for "How To Create A Sectioned Grid/list With
  • And
    With Html/css?"