Grid.css - 웹 개발자를위한 최소 그리드 시스템

부트 스트랩과 같은 더 큰 프론트 엔드 프레임 워크는 자신의 그리드 설정. 그러나 그들은 또한 짐을 많이 챙기다. 사전 설계된 페이지 요소 및 JavaScript 구성 요소의 형태로.

훨씬 작고 간소화 된 그리드 시스템을 찾고 있다면 Grid.css.

이 무료 오픈 소스 라이브러리는 전통적인 12 색 그리드 시스템 모든 레이아웃을 구조화 할 수 있습니다. CSS는 사용하기 쉽고 파일 자체 560 바이트 만 측정합니다. (절반은 KB입니다!)

시작하기는 쉽고 필요한 것은 하나의 CSS 파일 헤더에 추가됨.

당신은 직접 다운로드 링크 Grid.css 홈페이지 또는 공식 GitHub 레포에서. 당신은 심지어 원시 CDN 버전 직접 GitHub에서 파일을 직접 임베드하지 않고.

이제 열 구조를 설정할 수 있습니다. 원하는 요소를 사용하여 (divs, sections 등).

여기에는 일반적으로 .열 요소 (컨테이너) 많은 사람들과 함께 내부 열 요소. 열 클래스 숫자를 사용하다 컨테이너 내부의 전체 공간을 정의한다. 예를 들어, .col4 12 개의 합계 중 4 개의 열을 차지합니다..

여기에 예제 스 니펫 데모에서 :

원하는 열 클래스를 자유롭게 조합하여 사용할 수 있습니다. 최대 12 개까지 추가.

즉, 페이지를 재구성하다 그러나 원하는대로, 다른 행 컨테이너. 예를 들어 머리글에 대해 하나의 큰 범위를 가질 수 있지만 페이지 본문에는 두 가지 다른 행 / 열 설정을 사용할 수 있습니다.

당연히이 라이브러리는 100 % 무료 과 오픈 소스, 그래서 편집을 자유롭게 할 수 있습니다..

창작자 Ahmed Tarek, 또한 Butns를 만들었다. 이것은 많은 버튼 UI 킷의 변종입니다. 그것 Grid.css와 잘 어울립니다., 그래서 그들은 새로운 웹 프로젝트를 시작할 때 모두 훌륭한 라이브러리를 제공합니다..