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:

    .sortableli {
  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><ulclass="sortable"><liclass="item">item 1</li><liclass="item">item 2</li><liclass="break"><hr></li><liclass="item">item 3</li><liclass="item">item 4</li><liclass="break"><hr></li><liclass="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: 

    .sortableli {
  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><ulclass="sortable"><liclass="item">item 1</li><liclass="item">item 2</li><liclass="hr"><hr></li><liclass="item">item 3</li><liclass="item">item 4</li><liclass="hr"><hr></li><liclass="item">item 5</li><liclass="item">item 6</li><liclass="hr"><hr></li><liclass="item">item 7</li><liclass="item">item 8</li><liclass="hr"><hr></li></ul></body></html>

    Solution 3:

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

    li {
    float: left;
}

lia {
    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><liclass="item">item 1</li><liclass="item">item 2</li></ul><ul><liclass="line"><hr></li></ul><ul><liclass="item">item 3</li><liclass="item">item 4</li></ul><ul><liclass="line"><hr></li></ul><ul><liclass="item">item 5</li></ul>

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