[CSS] flex를 이용한 그리드 배열 만들기

고정 비율 그리드

20% 너비로 설정한 그리드

HTML

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

CSS

  .parent {  
    display:flex;  
    flex-wrap: wrap;
    border:1px solid black;
  }

  .child {  
    flex-basis: 20%;
    overflow:hidden;
    background-color:skyblue;
    box-shadow: 0 0 0 1px #000 inset;
  }

 

https://jsfiddle.net/ksh491zf/