[CSS 코드 조각] 깔끔하게 그리드를 짜는 코드

2013년 7월 11일

[2023-11-29] 이제는 그냥 grid나 flexbox를 사용하면 된다. 그런 게 없던 10년 전, 이 코드를 만나고 뛸 듯이 좋아했던 기억이 생생하다.

.l-grid {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.l-grid > li {
    display: inline-block;
    margin: 0 0 10px 10px;
}

이 코드는 SMACSS에 나오는 코드에서 IE7용 코드를 제거한 것이다. inline-block으로 썸네일 그리드 같은 것을 깔끔하게 처리한다. ul에 l-grid라는 클래스를 주면 된다.

👇 카테고리 글 목록

16년차 풀스택 웹 개발자 안형우입니다

웹 개발에서도 중요한 것은 개념입니다.
이 블로그에는 제가 개발하며 익힌 개념들을 정리합니다.

OOCSS에서 Utility-First CSS까지, CSS를 효과적으로 관리하는 데 관심이 많았습니다.
“프로젝트 중심 실전 CSS”라는 유튜브에 강의를 연재했습니다.

대표글

_{^{2024년 2월 16일}}

_{^{2024년 1월 5일}}

_{^{2023년 4월 13일}}

_{^{2023년 1월 15일}}

_{^{2018년 10월 13일}}

_{^{2016년 12월 20일}}