CODEWITHSUNDEEP
cssgrid
Stephanie Ortiz
Stephanie Ortiz

Reputation: 41

How do I split this ordered list into columns, and in the right order?

Here is a pen of my code: CodePen

This is exactly what I want it to look like, however, it's in the wrong order. I want the numbers to read up and down then left to right. So that the first column is 1-7 top to bottom, the second column is 7-14 top to bottom, the third column is 15-21 top to bottom, and the 5th column is 16-28 top to bottom

body {background:grey;}

.top-specialties {
    text-align: center;
    background: url('/img/field.jpg');
    background-size: cover;
    background-position: center center;
    padding:4em 1em;
}

/*.top-specialties ol li {

 -webkit-column-count: 4;
 -moz-column-count: 4;
 -o-column-count: 4;
  column-count: 4; 

}
*/

.top-specialties ol {
  /*max-width: 350px;
*/
  counter-reset: my-awesome-counter;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(25%, 1fr));
  grid-auto-flow: row;

 }


.top-specialties ol li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
  background: white;
  color:black;
  padding:1em;
  border-radius:50px;
  display: inline-box;
  text-align:left;


}
.top-specialties ol li::before {
  content: counter(my-awesome-counter);
  color: #fff;
  font-weight: bold;
  background: #0C82AA;
  border-radius: 50%;
  max-width:20px;
  padding:0.5em 0.75em;
  margin:0 0.5em 0 0 ;
}


<section class="top-specialties">

    <div class="row">
          <ol>

          <li>Surgical</li>
          <li>Surgical</li>
          <li>Surgical</li>
          <li>Surgical</li>
          <li>Surgical</li>
          <li>Surgical</li>
          <li>Surgical</li>
          <li>Surgical</li>
          <li>Surgical</li>
          <li>Surgical</li>
          <li>Surgical</li>
          <li>Surgical</li>
          <li>Surgical</li> 
        </ol>
    </div>
</section>

Upvotes: 2

Views: 93

Answers (1)

Soothran
Soothran

Reputation: 1243

Using grid-auto-flow: column and grid-template-rows (7 equal spaced rows here) the grid items will flow in the vertical direction. Also this will create new columns if necessary

body {
  background: grey;
}

.top-specialties {
  text-align: center;
  background: url('/img/field.jpg');
  background-size: cover;
  background-position: center center;
  padding: 4em 1em;
}


/*.top-specialties ol li { -webkit-column-count: 4; -moz-column-count: 4;
-o-column-count: 4; column-count: 4; } */

.top-specialties ol {
  /*max-width: 350px; */
  counter-reset: my-awesome-counter;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
  grid-auto-flow: column;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: column;
}

.top-specialties ol li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
  background: white;
  color: black;
  padding: 1em;
  border-radius: 50px;
  display: inline-box;
  text-align: left;
}

.top-specialties ol li::before {
  content: counter(my-awesome-counter);
  color: #fff;
  font-weight: bold;
  background: #0C82AA;
  border-radius: 50%;
  max-width: 20px;
  padding: 0.5em 0.75em;
  margin: 0 0.5em 0 0;
}
<section class="top-specialties">

  <div class="row">
    <ol>

      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>

    </ol>
  </div>
</section>

With 28 list items as shown in the pen

body {
  background: grey;
}

.top-specialties {
  text-align: center;
  background: url('/img/field.jpg');
  background-size: cover;
  background-position: center center;
  padding: 4em 1em;
}


/*.top-specialties ol li { -webkit-column-count: 4; -moz-column-count: 4;
-o-column-count: 4; column-count: 4; } */

.top-specialties ol {
  /*max-width: 350px; */
  counter-reset: my-awesome-counter;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
  grid-auto-flow: column;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: column;
}

.top-specialties ol li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
  background: white;
  color: black;
  padding: 1em;
  border-radius: 50px;
  display: inline-box;
  text-align: left;
}

.top-specialties ol li::before {
  content: counter(my-awesome-counter);
  color: #fff;
  font-weight: bold;
  background: #0C82AA;
  border-radius: 50%;
  max-width: 20px;
  padding: 0.5em 0.75em;
  margin: 0 0.5em 0 0;
}
<section class="top-specialties">

  <div class="row">
    <ol>

      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
      <li>Surgical</li>
    </ol>
  </div>
</section>

Upvotes: 3

Related Questions