DEV Community

Cover image for Creating 5x20 grid using Flex(css)
Zaw Htut Win
Zaw Htut Win

Posted on

Creating 5x20 grid using Flex(css)

#css #jquery 
<html>
  <body>
    <div class="container">
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.container .entry {
    padding: 0; 
    margin: 5px; 
    width: 10%; /*to be responsive*/
    height: 20px; 
    border: 1px solid black;
    text-align: center; 
    line-height: 20px;
}
Enter fullscreen mode Exit fullscreen mode 
function createDivs(count,itemsInaRow) {
  for(let i=1;i<=count/itemsInaRow;i++){
          const container = $("<div>").addClass("container");
          //each container contain five entry
          for (let j = 1; j <= itemsInaRow; j++) {
              const div = $("<div>").addClass("entry").text("");
              container.append(div);
          }
          $("body").append(container);
      }
   //after creating 5x20 grid, set the values
    $(".entry").each(function(index,obj){
      $(this).text(String(index+1).padStart(3, '0'));
    });
}

createDivs(100,5);
Enter fullscreen mode Exit fullscreen mode

Image description

Top comments (0)

Read next

dimeloper profile image

CSS techniques every frontend developer should know in 2024

Dimitris Kiriakakis -

jaredcodes profile image

Finally Understand Responsive Design!

Jared Weiss -

dionarodrigues profile image

6 useful CSS features you might not know about

Diona Rodrigues -

jolamemushaj profile image

How I built CupBook

jolamemushaj -