[css] 옛날 크롬 브라우저에서 grid를 사용 못하는 경우

 

 

 

아주 옛날 크롬 버전을 사용하는 곳의 프로젝트를 하게 됐는데 grid가 안먹히더라..!!!!

당황하지 않고 많은 방법을 찾았다.

 

0.프로젝트에서 사용한 방법 : 잘 사용했습니다..

.test {

    display: flex;

    flex-wrap: wrap;

}

. test > * {

    /* grid 클래스의 직계 자식 모든 요소 */

    width: calc(100% / 6);

    box-sizing: border-box;

}

 

 

아래는 검색했을 때 다른 방법이라네요.

 

1. flex를 사용하는 방법

.grid-container {

    display: flex;  /* flex 컨테이너로 설정 */

    flex-wrap: wrap;  /* 아이템이 넘칠 경우 다음 줄로 넘어가도록 설정 */

  }

 

  .grid-item {

    flex: 0 0 16.66%;  /* grow shrink basis - 각 아이템이 컨테이너의 1/6 크기를 차지 */

    /* 또는 이렇게도 작성 가능: width: 16.66%; */

  }

 

 

2. float와 clearfix 사용

.grid-container {

    width: 100%;

  }

 

  .grid-item {

    float: left;

    width: 16.66%; /* 100% ÷ 6 */

  }

 

  /* clearfix */

  .grid-container::after {

    content: "";

    display: table;

    clear: both;

  }

 

 

3.display: inline-block 사용

.grid-container {

    font-size: 0; /* inline-block 사이 공백 제거 */

  }

 

  .grid-item {

    display: inline-block;

    width: 16.66%;

    font-size: 16px; /* 원래 폰트 크기로 복구 */

    vertical-align: top;

  }

 

4. flexbox 사용

.grid-container {

    display: flex;

    flex-wrap: wrap;

  }

 

  .grid-item {

    flex: 0 0 16.66%;

  }