상위 21개 HTML5/CSS3 그리드 시스템 및 프레임워크

불과 몇 년 전만 해도 기존의 디자인 방식은 홈페이지를 자체적으로 디자인하고 와이어프레임과 콘텐츠 상자를 연결한 다음 최고를 바라는 것을 의미했지만 점차 이 기술은 사라지고 새롭고 보다 현대적인 빠른 웹사이트 개발 방법입니다. 등장했습니다. 특히 CSS3는 Flex-box를 도입했습니다. 사용하기 쉬운 그리드 기능으로 콘텐츠 레이아웃을 생성하는 데 사용할 수 있지만 여전히 일부는 내성이 있고 다른 일부는 절대적인 디자인 정밀도를 위해 훨씬 더 복잡한 접근 방식을 취합니다.

새 웹 사이트를 열면 일반적으로 사이트의 헤더 부분, 콘텐츠 영역 및 사이드바가 표시됩니다. 이러한 주요 영역에는 고유한 디자인 레이아웃과 사양도 포함되어 있으며 토끼 구멍은 계속해서 깊어지고 있습니다. 모든 매체, 장치 및 소프트웨어에서 잘 보이는 홈페이지(또는 다른 페이지) 레이아웃을 디자인하는 방법을 찾는 것이 중요합니다. 따라서 그리드 레이아웃을 개발하기 위한 CSS 및 HTML 프레임워크 및 시스템 모음을 함께 구성하는 것이 동료 개발자에게 유용할 수 있다고 생각했습니다.

더 많은 프레임워크를 원하십니까? 다른 라운드업을 시도해 보세요.

• 자바스크립트 프레임워크
• HTML5 프레임워크
• CSS3 프레임워크
• Node.js 프레임워크

말할 필요도 없이 이러한 디자인은 모든 상황에 적용할 수 있으므로 디자인 레이아웃 자체의 꼬임과 단점을 해결해야 하는 두통에서 벗어날 수 있습니다. 거기에 넣어. 이러한 그리드 시스템 전반에 걸쳐 다양하고 다양한 스타일을 찾을 수 있습니다. 시간을 내어 데모 페이지를 방문하고 원하는 것을 적어서 일치하는 프레임워크를 더 쉽게 찾을 수 있습니다. 당신의 필요를 위해.

데드 심플 그리드

그리드는 결코 복잡하지 않아야 합니다. 본질적으로 그리드는 전체 디자인을 결합하는 HTML 요소일 뿐이며 Vladimir Agafonkin은 그 개념을 수용하는 개발자 중 한 명입니다. 그의 그리드 프레임워크인 Dead Simple Grid는 200바이트의 CSS 코드로 제공됩니다. 이는 최소한의 코드이므로 페이지에서 코드가 있는지조차 알아차리지 못할 것입니다. 원하는 경우 그리드를 분리하여 기본 콘텐츠 영역과 유연한 사이드바를 표시할 수 있습니다. 이러한 종류의 그리드는 최소한의 디자인이 선호되는 블로그 및 일반 홈페이지 레이아웃에 적합합니다. 미디어 쿼리 덕분에 반응형 디자인이 통합되어 그리드가 사용되는 모든 장치에서 완벽하게 보입니다.

버번 니트

Bourbon은 SASS 전처리기를 위한 매우 성공적인 믹스인 라이브러리입니다. 이것은 물론 이미 Bourbon과 SASS를 사용하는 사람들에게 Neat를 매력적인 선택으로 만들었습니다. Neat은 개발자가 몇 분 안에 설정할 수 있을 만큼 빠르고 쉬운 유체 그리드 시스템에 액세스할 수 있도록 하지만 무제한 변경 및 조정이 문제가 되지 않을 정도로 유연합니다.

그르드

Grd는 유연하고 현대적인 반응형 레이아웃을 만들기 위한 백엔드 도구로 Flexbox를 사용하는 CSS 그리드 시스템입니다. 라이브 데모를 사용하면 설정 및 다양한 디자인 사용자 지정을 사용하여 Grd가 기존 워크플로에 특정 디자인 요소를 통합하는 문제를 해결할 수 있는지 확인할 수 있습니다. 설정 드롭다운만 사용하여 머리글, 바닥글 및 일반 콘텐츠 영역을 쉽게 만들 수 있다는 것을 알았습니다.

구조

Flexbox를 기반으로 하는 Structure는 섹션 및 레이아웃 매개변수를 정의하기 위해 선언적 구문 패턴(Angular.js의 패턴과 유사)을 사용합니다. 일부 개발자는 페이지의 최종 마크업을 확인할 수 없다고 불평했지만 구조를 사용하면 클래스 및 식별 이름과 같은 기존 CSS 속성을 어지럽히지 않는 선언적 그리드를 만들 수 있다는 아이디어가 있습니다.

960 그리드 시스템

수십만 개의 웹사이트가 Nathan Smith의 960 그리드 시스템을 사용하여 디자인 레이아웃을 강화했습니다. 열심히 일하는 웹 개발자의 워크플로를 간소화하기 위한 효율적인 도구입니다. 두 가지 다른 열 레이아웃(각각 12 및 16)을 선택하여 개발자는 모든 종류의 동적 및 정적 입력을 지원하는 홈페이지를 신속하게 부트스트랩할 수 있습니다. 더 많은 열을 추가할 수 있지만 사용을 보다 명확하게 이해하려면 설명서를 참조해야 합니다.

의미 없는

Unsemantic은 완전한 반응형 디자인 기능을 제공하는 960 그리드의 후속 버전입니다. 고유한 풀 클래스를 통해 개발자는 제작 중인 페이지의 레이아웃을 재정렬할 수 있으며, 이는 검색 엔진이 각 콘텐츠 요소의 목적을 더 잘 이해하도록 돕는 알려진 전략인 주어진 시간에 가장 중요한 콘텐츠를 홍보하고 표시하는 데 도움이 될 수 있습니다. Unsemantic은 또한 Media Queries의 자랑스러운 사용자이므로 기존 프론트 엔드 개발자는 자신의 필요에 맞게 이 그리드 프레임워크를 사용자 정의하는 데 어려움을 겪지 않을 것입니다.

단순 그리드

따라서 Simple Grid라는 이름은 단순함과 사용 편의성을 추구하는 모든 사람을 위한 것입니다. 레이아웃은 반응형이며 스마트폰, 태블릿 및 데스크톱 컴퓨터와 호환됩니다. 즉, 프로젝트의 성능은 의심의 여지없이 최고 수준이 될 것입니다. 그것은 큰 화면과 더 높은 해상도와도 완전히 조화를 이룹니다. 또한 Simple Grid는 추가 자산이 없는 단순한 그리드로 매우 가볍습니다. 편리한 12열 구조로 원하는 대로 레이아웃을 자유롭게 만들 수 있습니다. 두 개, 세 개, 네 개 또는 여섯 개 열로 완벽하게 나눌 수 있습니다.

csswizardry-grids

csswizardry-grids와 같은 HTML 그리드를 사용하면 시간과 에너지를 절약할 수 있습니다. 마음껏 활용할 수 있는 강력한 도구입니다. 매우 사용자 친화적이고 쉽게 구조화되어 모든 수준의 웹 개발자가 이를 최대한 활용할 수 있습니다. 위의 스크린샷에서 csswizardry-grids가 지원하는 모든 다양한 변형을 엿볼 수 있습니다. 자유롭게 재주문할 수 있어 취향에 맞는 티셔츠를 입으실 수 있습니다. 지금 csswizardry-grids를 사용하여 처음부터 작업을 수행하는 것을 피하여 활동을 수행하고 오른쪽 발부터 ​​시작하십시오.

심오한 그리드

Profound Grid가 제공하는 자유는 그 이상입니다. 고정 및 유동 레이아웃 모두에 이 유연하고 확장 가능한 그리드 시스템을 사용할 수 있습니다. 결과는 모든 최신 장치에서 원활하게 작동합니다. 원하는 대로 열을 변경, 제거 또는 추가하여 원하는 정확한 구조를 만들 수 있습니다. 먼저 몇 가지 예를 확인하여 Profound Grid로 가능한 것을 확인할 수 있습니다. 또한 열을 계산할 때 여백이 음수이므로 Profound Grid는 화면 크기 및 웹 브라우저에 관계없이 유동적인 레이아웃이 동일하게 표시되도록 보장합니다.

철판

그리드 시스템을 사용하면 시간을 절약할 수 있을 뿐만 아니라 기술에 대해 걱정할 필요가 없기 때문에 엄청난 이점이 있습니다. 예를 들어 Griddle은 널리 사용되는 장치 및 웹 브라우저와의 완벽한 호환성을 보장합니다. 즉, 응용 프로그램의 성능은 항상 최고 수준입니다. Griddle을 사용하면 비례 및 중첩 그리드에서 중심 및 하이브리드 단위에 이르기까지 모든 것을 실현할 수 있습니다. 후자의 경우 일부 사용자 지정을 통해 고정 및 유동 장치를 하나의 인상적인 빌드로 결합할 수 있습니다. 장치의 수평 중심을 제어할 수 있으며 수직 정렬을 변경할 수도 있습니다.

CSS 스마트 그리드

CSS Smart Grid는 최신 트렌드와 규정을 준수하여 다양한 기기와의 호환성을 보장합니다. 요컨대, 이 도구는 가볍고 반응이 빠르며 모바일 우선이므로 멋진 물건을 만들 수 있습니다. 스마트폰을 사용하든 대형 데스크탑 화면을 사용하든 CSS Smart Grid는 레이아웃이 두 ​​가지 모두에서 문제 없이 작동하는지 확인합니다. 참고로 피처폰을 사용하여 인터넷을 탐색하는 사람이 있더라도 CSS Smart Grid 기반 프로젝트는 단일 열 보기에서 잘 작동합니다. 공식 웹 사이트에는 빠른 방법도 있으므로 도구를 사용할 때 문제가 발생하지 않습니다.

그리드렉스

Gridlex는 뛰어난 디자인과 사용 용이성으로 인해 눈에 띕니다. 이 Flexbox 기반 그리드 프레임워크의 단순성은 놀랍고 비전은 간단합니다. 그리드 안에 기둥을 감싸고 필요한 경우 최종 디자인을 거부할 수 없는 모양으로 만들기 위해 추가 조정이 필요합니다. Gridlex를 사용하는 웹 사이트의 데모를 보면 이것이 최고의 그리드 시스템이라는 것이 분명하며 자신의 프로젝트 및 워크플로에 대해 수행할 수 있는 작업에 실망하지 않을 것입니다.

반응형 그리드 시스템

반응형 그리드 시스템(Responsive Grid System)에는 완벽한 도메인 이름, 명확한 비전 및 반응형 그리드 디자인을 쉽게 만드는 데 필요한 도구가 많이 있습니다! 그리드 생성기는 사용하려는 열 수와 열 사이에 표시할 여백을 지정할 수 있는 간단한 양식 입력을 제공합니다. 제출을 클릭하면 코드 출력을 시작할 준비가 된 것입니다. 다음 반응형 그리드 레이아웃. 저자 Graham은 원하신다면 기꺼이 모든 노력을 다해 드리겠습니다. 페이지 바닥글에서 그와 연락할 수 있습니다.

그리드리

개발자들은 오늘날 가장 현대적인 브라우저를 지원하기 위해 최소한의 그리드 레이아웃 시스템으로 Gridly를 구축했습니다. 가벼운 구조로 인해 개발자는 너무 많은 번거로움 없이 그리드/열 레이아웃을 쉽게 시작하고 실행할 수 있습니다. 전반적으로, 이 라이브러리의 터무니 없이 작은 크기는 앞으로 나올 프로젝트에 대해 더 많은 것을 원하게 만들 것입니다.

폼스톤

Formstone은 그 자체로 단일 관리 그리드 시스템이 아니라 실제로 매일 접하는 기존 웹 페이지를 구성하는 고도로 사용자 정의 가능한 구성 요소와 웹 요소가 필요한 프론트 엔드 개발자를 위한 라이브러리입니다. 모듈식의 반응형 자동화 라이브러리인 Formstone은 대규모 웹 사이트 프로젝트를 확장할 목적뿐만 아니라 그리드 레이아웃 자체를 사용하는 데에도 사용할 수 있습니다.

부트스트랩

다른 모든 것이 구축된 그리드 시스템이 아니었다면 Bootstrap은 오늘날 어디에 있었을까요? 우리는 여전히 Bootstrap 4가 도착하기를 간절히 기다리고 있습니다. 그러나 그 동안.. 금세기의 가장 유명한 프론트 엔드 프레임워크 중 하나로 자리 잡은 프레임워크에 대해 "예"라고 대답하지 않을 수 없습니다. 수백만 개의 웹사이트가 Bootstrap의 기능에 의해 구동되지만 Bootstrap의 핵심에 통합되는 그리드 프레임워크가 없었다면 불가능했을 것입니다.

기반

Foundation은 반응형 디자인을 지원하는 또 다른 성공적인 프론트엔드 라이브러리로, 최신 버전(Foundation 6)은 개발자가 클라이언트에게 믿을 수 없을 정도로 다양한 디자인을 제공하는 데 도움이 될 수 있는 보다 현대적인 기능과 요소를 제공합니다. Foundation에서 제공하는 사용하기 쉬운 템플릿을 사용하면 이 모든 그리드 개발에서 휴식을 취하고 대신 중요한 것에 집중할 수 있습니다.

해골

스켈레톤은 더 많은 것을 원하게 만드는 아름답고 자연스러운 디자인을 가지고 있습니다. 제작자들은 소규모 프로젝트를 위한 최선의 선택이 되도록 Skeleton의 아이디어를 만들었습니다. 또한 본격적인 프레임워크를 사용하는 것이 적절하지 않다고 생각되는 프로젝트에서도 사용할 수 있습니다. Skeleton은 웹사이트 프로토타입을 시작하고 실행하는 데 필요한 필수 사항을 제공합니다. 그리드 레이아웃, 표제 및 섹션을 위한 타이포그래피 옵션, 모든 양식 요구 사항을 위한 버튼 요소, 실제로 사용자 정의 양식을 통해 직접 코딩하는 데 드는 시간 절약, 목록, 테이블 및 코드 구문의 멋진 추가, 미디어 당신의 디자인이 완벽하게 반응할 수 있도록 쿼리 프레임워크!

반응형 그리드 시스템 2

Responsive Grid System(버전 2)은 크기가 매우 작지만 스타일면에서 매우 효과적인 모바일 우선 그리드 시스템입니다. 다양한 열 레이아웃(24, 16, 12) 중에서 선택할 수 있습니다. 열 사이의 여백과 패딩을 사용자 정의하고 폴리필을 사용하여 뛰어난 디자인 레이아웃을 만들 수도 있습니다.

다음 프로젝트를 위한 반응형 그리드 시스템

다음 프로젝트를 위한 반응형 그리드 시스템은 960 그리드 시스템과 동일한 클래스를 사용합니다. 모바일 방문자에게 먼저 서비스를 제공하도록 구축되었으며 헤더 관리를 위한 상용구를 제공합니다. 개발자는 모든 최신 브라우저에서 사용할 수 있도록 테스트했습니다. 반응형 웹 디자인을 구축하는 데 도움이 되는 기본 그리드 시스템으로 사용할 수 있습니다. 이렇게 하면 인기 있는 그리드 시스템에 비해 기존 능력이 유지됩니다.

HTML5 상용구

HTML5 Boilerplate는 프론트엔드 개발자를 위한 강력한 상용구 프레임워크(템플릿)입니다. Bootstrap이나 Foundation과 같은 더 큰 프레임워크와 관련된 번거로움 없이 프로젝트를 시작하려는 개발자를 위한 것입니다.