몇 년 동안 디자인이 실제 2 차원 레이아웃을 요구했을 때 본능은 중첩 된 플렉스 컨테이너 스택에 도달하는 것이 었습니다. 다른 행 내부의 열 안에있는 카드 열,각각의 굴곡,각각의 공간을 위해 다른 사람들과 싸우는 픽셀이 결국 내가 원하는 곳에 착륙했다는 의미에서 효과가 있었지만 결코 올바른 도구가 아니었고 디자인을 변경해야 할 때마다 바로 가기에 대해 지불했습니다. CSS 그리드는 정확히 이것을 위해 만들어졌으며,내가 그것을 피하지 않는 날 레이아웃 코드가 짧아지고 마크업이 평평 해졌습니다.
너무 오랫동안 그리드에서 멀어지게 만든 것은 구문이었습니다. grid-template-columns: repeat(3, minmax(0, 1fr)) 는 손가락에서 굴러떨어지는 어구가 아니며,선언하는 트랙과 나타나는 상자 사이의 관계는 수십 번 일어나는 것을 볼 때까지 분명하지 않습니다. "I know what I want" and "I know the property that produces it" is exactly what a generator closes.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 CSS 그리드 생성기 라이브 미리보기가 앞에 리플로우되는 동안 열과 행의 수를 설정하고,각 축의 크기를 선택하고,간격을 다이얼하고,정렬을 조정할 수 있습니다. 보이는 것을 생성하는 정확한 CSS 는 복사 준비 상자에 아래에 있습니다. 그것은 당신이 기억해야하는 사양에서 그리드를 클릭하여 구축 한 레이아웃으로 바꿉니다.
TL;DR: CSS Grid 는 행과 열을 동시에 제어하는 2 차원 레이아웃 모델입니다. 컨테이너가 이를 통해 구동합니다
grid-template-columns,grid-template-rows,gap그리고,네 개의 properties 를 정당화하고 정렬합니다. 이 generator 는 그것들을 모두 노출시키고,live preview 를 보여주며,사용하는 clean CSS 를 내보냅니다repeat()그리고 thefr단위. 미리보기는 출력하는 것과 동일한 선언으로 렌더링하기 때문에 표시되는 내용은 정확히 붙여넣는 것입니다. 가입 없이 브라우저에서 완전히 실행됩니다.
CSS 그리드 생성기는 어떤 문제를 해결합니까?
CSS 그리드의 어려움은 복잡하다는 것이 아닙니다. 추상적이라는 것입니다. 당신은 구조 ("them" 사이에 약간의 공간이있는 세 개의 동일한 열) 를 설명하고 브라우저는 기하학을 계산합니다. 그 간접은 전체 요점입니다. 왜냐하면 단일 미디어 쿼리없이 그리드를 반응하게 만드는 것이기 때문입니다. 그러나 간접은 머릿속에서 보기가 어렵습니다. 당신은 볼 수 없습니다 repeat(3, 1fr) 그리고 렌더링된 상자 그리드를 보는 방식으로 결과를 즉시 느껴보세요.
생성기는 쓰기-저장-새로 고침 루프를 단일 상호 작용으로 축소합니다. 열 수를 변경하면 세 개의 상자가 4 개가 됩니다. 에서 트랙을 전환합니다 1fr 에 auto 그리고 그 열은 내용의 너비에 맞춰 튕겨 나갑니다. 여러분은 틈을 올리고 상자들은 숨을 쉰다. 이것의 십분 후에 분수 단위는 여러분이 번역하는 기호가 되는 것을 멈추고 여러분이 일부러 도달하는 것이 된다. 그리고 탐험을 마쳤을 때,기록할 메모가 남지 않는다. 왜냐하면 작업 중인 CSS 는 이미 출력 상자에 여러분을 위해 쓰여져 있기 때문이다.
두 번째로 더 조용한 이점이 있습니다. 조작으로 레이아웃을 구축하면 도구가 유효하고 잘 구성된 CSS 만 방출하게됩니다. 깨진 것을 생성 할 수 없습니다 grid-template-columns 클릭해서 값을 매기면 출력은 항상 안심하고 붙여넣을 수 있습니다. 그 신뢰성이 바로 제가 모든 규칙을 처음부터 작성하는 대신 시각적 CSS 빌더 세트를 가까이에 두는 이유입니다.
그리드 컨테이너는 어떤 속성을 제어합니까?
CSS Grid 는 flexbox 와 마찬가지로 컨테이너와 그 항목 사이에 책임을 나눕니다. 컨테이너는 트랙과 전체 구조를 정의하며,그곳이 대부분의 레이아웃 결정이 이루어지는 곳이기 때문에 생성기가 집중하는 곳입니다. 각 컨테이너 속성이 수행하는 작업은 다음과 같습니다.
| 재산 | 그것이 통제하는 것 | 공통 값 |
|---|---|---|
grid-template-columns |
열의 수와 크기 | repeat(3, 1fr), 200px 1fr, auto |
grid-template-rows |
행의 수와 크기 | repeat(2, auto), 100px, 1fr |
gap |
트랙 사이의 공간 | 예를 들어 모든 길이 16px 또는 20px 10px |
justify-items |
행 축을 따라 항목 위치 | stretch, start, center, end |
align-items |
열 축을 따라 항목 위치 | stretch, start, center, end |
justify-content |
행 축에서 그리드가 컨테이너보다 좁을 때 위치를 추적합니다 | start, center, space-between |
align-content |
열 축의 위치를 추적합니다 | start, center, space-between |
이 막대기를 만드는 정신 모델은 트랙과 항목의 구별입니다. grid-template-columns 그리고 grid-template-rows 그리드의 빈 차선인 트랙을 정의합니다. 그 차선 사이에 간격이 있습니다. The justify-items 그리고 align-items 그런 다음 속성은 각 항목을 차지하는 셀 내부에 배치합니다 justify-content 그리고 align-content 여유 공간이 있을 때 트랙의 전체 세트를 컨테이너 내부에 배치합니다. 생성기는 이 두 레벨을 시각적으로 분리하여 유지하므로 셀 내에서 항목을 이동하는 것과 페이지 내에서 전체 그리드를 이동하는 것의 차이를 느낄 수 있습니다.
fr 단위는 무엇을 의미합니까?
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 fr 단위는 전체 모델에 대한 비용을 지불하는 CSS 그리드의 조각이며,복사보다는 이해할 가치가 있습니다. 1 fr 고정된 크기와 간격을 뺀 후 그리드 컨테이너의 여유 공간의 한 부분을 나타냅니다. 라고 쓰면 grid-template-columns: 1fr 1fr 1fr는,container's 유효한 폭 3 개 동등한 부분으로 분할됩니다. 쓰십시오 2fr 1fr 1fr 그리고 첫 번째 열은 공간의 절반을 차지하고 나머지 두 열은 나머지를 나눕니다. 브라우저는 모든 크기 조정에서 해당 분수를 다시 계산하므로 분수 기반 그리드는 중단점 없이 유동적입니다.
이는 대부분의 레이아웃에서 그리드를 백분율보다 우수하게 만드는 동작입니다. 집합 33.33% 열은 갭을 무시하고 오버플로를 합니다. 왜냐하면 백분율에 갭을 더한 값이 컨테이너보다 더 많기 때문입니다. 분수 단위는 갭을 제거한 후에 계산되므로 repeat(3, 1fr) 간격이 항상 맞습니다. 발전기의 기본값은 다음과 같습니다 1fr 열은 정확히 이런 이유에서이며,격차를 변경하면서 3 개의 동일한 열이 비율을 유지하는 것을 볼 수 있습니다. 대신 내용을 껴안는 열을 원한다면 로 전환하십시오 auto, min-content, 또는 max-content 그리고 그 차이를 즉시 확인하십시오.
3 열 레이아웃은 어떻게 만들 수 있나요?
이것은 사람들이 그리드로 만드는 가장 일반적인 것 중 하나이며,레시피는 두 줄입니다. 컨테이너를 로 설정합니다 display: grid 그리고 그것을 줘 grid-template-columns: repeat(3, 1fr). 그것은 내용이 필요로 하는 만큼 많은 행으로 흘러 들어가는 3 개의 동등한 열을 생성합니다. a 를 추가하십시오 gap 그리고 당신은 카드 레이아웃을 가지고 있습니다.
생성기에서 열 수를 3으로 설정하고 크기는 그대로 둡니다 1fr그리고,미리보기는 같은 셀의 격자를 배치합니다. 출력 상자는 다음을 보여줍니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}
입력하는 것보다 클릭해서 만들 가치가 있는 이유는 실제 레이아웃이 결코 이렇게 깔끔하지 않기 때문입니다. 사이드바가 고정된 너비이고 내용이 구부러지거나 첫 번째 행이 나머지 행보다 더 높기를 원할 것입니다. 이러한 각 변경 사항은 생성기의 하나의 컨트롤이고 출력의 하나의 편집된 값이며 스타일시트에 커밋하기 전에 효과가 표시됩니다. 특정 블록에 대해 그리드와 플렉스 기반 접근 방식 중에서 여전히 결정하고 있는 경우 플렉스박스 생성기 는 동반 도구이며, 이 가이드의 뒷부분 비교에서는 각 도구가 승리하는 시기를 설명합니다.
언제 flexbox 위에 grid 를 사용해야 하나요?
두 모델을 모두 알고 나면 가장 중요한 질문이며,정직한 대답은 레이아웃이 갖는 차원의 수에 따라 달라진다는 것입니다. Flexbox 는 1 차원입니다. 단일 축,행 또는 열을 따라 항목을 배열하고,물어보면 감싸줍니다. 그리드는 2 차원 행과 열을 함께 제어하므로 항목은 행과 열 모두에 의해 한 번에 배치될 수 있습니다.
제가 사용하는 실용적인 규칙은 이것입니다. 만약 제가 일련의 것들을 한 줄로 배치한다면,네비게이션 바,태그의 한 줄,도구 모음,폼 필드의 스택,즉 flexbox 입니다. 만약 제가 행과 열이 모두 서로 정렬해야 하는 구조,헤더, 사이드바,콘텐츠 영역이 있는 페이지 쉘,또는 모든 카드가 깨끗한 격자선 위에 놓이는 갤러리,즉 격자 둘은 라이벌이 아닙니다; 격자 셀은 종종 플렉스 컨테이너를 포함하고,플렉스 항목은 종종 작은 격자입니다. 여기 테이블로 분할이 있습니다.
| 질문 | 플렉스박스 | CSS 그리드 |
|---|---|---|
| 치수 | 한 번에 하나의 축 | 행과 열이 함께 표시됩니다 |
| 위한 최고의 | 도구 모음, 탐색, 항목 행, 래핑 태그 | 페이지 레이아웃, 갤러리, 대시보드, 양식 |
| 에 의해 구동되는 크기 | 콘텐츠, 그 다음 배포 | 선언하는 트랙 템플릿입니다 |
| 정렬 | justify-content, align-items |
같은 플러스 justify-items, align-content |
| 일반적인 사용 | 그리드 셀 내부 | 전체 페이지 또는 섹션 프레임 |
생성기는 양방향으로 동일한 시각적 결과를 구축하고 어느 것이 더 깨끗한 규칙을 생성하는지 확인할 수 있기 때문에 이를 구체적으로 만듭니다. 동일한 카드 갤러리의 경우 그리드 repeat() 는 두 줄이고 flex 는 모든 자식에게 너비가 있는 래핑 컨테이너입니다. 항목을 가장자리로 퍼뜨려야 하는 단일 행의 경우 flex with space-between 는 더 짧은 길이다.
Gap,justify-content,align-content 의 차이점은 무엇인가요?
이 세 가지는 모두 공간을 다루기 때문에 종종 혼란스러워하지만 서로 다른 수준에서 작동합니다. The gap 속성은 트랙 사이의 고정 간격을 설정하고,그것은 당신이 거의 모든 그리드에서 사용할 것입니다. 단일 값 공간 행과 열을 동일하게; 두 값은 별도로 행 간격과 열 간격을 설정,순서 행 다음 열에서. 생성기는 두 간격을 독립적으로 설정하고 그들이 다를 때만 속기를 방출 할 수 있으므로 출력은 상황이 허용하는 한 짧게 유지됩니다.
justify-content 그리고 align-content는,대조적으로, grid's 트랙이 컨테이너보다 작을 때만 아무 것도 수행하여 배포할 여유 공간을 남겨 둡니다. 열이 모두 고정 픽셀 너비이고 컨테이너를 채우지 않는 경우 justify-content: center 전체 트랙 블록의 중앙에 위치합니다 space-between 가장자리로 밀어 넣습니다. 와 fr 이미 너비를 채우고 있는 열,이러한 속성은 배포할 것이 없고 아무것도 하지 않는 것처럼 보이는데,이는 일반적인 혼란의 원인입니다. 생성기는 기본값에 남아 있을 때 출력에서 생략합니다 start,그래서 복사된 규칙의 모든 줄은 눈에 보이는 효과를 갖는 줄입니다. 의미 있는 선언만 내보내는 그 습관은 제가 에 의존하는 것과 같습니다 그라디언트 생성기 그리고 the 박스-섀도 생성기는, 노옵라인으로 가득 찬 룰은 한눈에 믿을 수 없는 룰이기 때문에.
생성기는 어떻게 미리보기를 정직하게 유지합니까?
어떤 시각적인 건축업자를 가진 함정은 시사 및 수출한 부호가 떨어져 표류할 수 있다 이다. 그것의 시사에게 1 개의 방법을 렌더링하고 그것의 부호를 다른 방법으로 생성하는 공구는 쓸모 없는 보다는 더 나쁘다,왜냐하면 재생산하지 않을 배치를 가르치기 때문이다. 이 발전기는 선언의 단 하나 명부에서 시사 그리고 베껴진 CSS 둘 다를 건축해서 저것을 피한다. 방출할 것이다 어느 특성을 결정하는 동일한 기능은 시사 상자를 작풍하는 것 이다,그래서 당신이 보는 무슨이 정확하게 당신이 풀칠할 수 있던 분리되는 연출 경로가 없다.
이러한 디자인 선택이 출력이 사용되는 이유입니다 repeat() 하나 이상의 트랙이 있는 모든 축의 경우 단일 트랙이 기본 크기로 방출되지만 두 개 이상이 축소됩니다 repeat(n, size)이는 인간이 쓰는 것과 개수가 증가함에 따라 규칙을 읽을 수 있게 유지하는 것입니다. 이는 작은 것이지만 배송할 출력과 다시 작성할 출력의 차이입니다.
반응형 카드 그리드 구축, 단계별
여기 제가 자주 사용하는 워크플로우가 있습니다. 열 개수는 3 개이고 크기는 on 으로 시작하세요 1fr니다. 이제 3 개의 동등한 유동적인 열이 있습니다. 행 크기를 로 설정합니다 auto 그래서 각 행은 가장 높은 카드에 맞게 커집니다. 그 틈을 편안한 것으로,카드의 경우 약 20 픽셀로 늘립니다. 그것은 완전하고 반응성이 뛰어난 카드 격자이며 출력은 4 줄입니다.
미디어 쿼리 없이 자체적으로 래핑을 수행하려면 실제 프로젝트의 다음 단계는 스왑입니다 repeat(3, 1fr) 위한 repeat(auto-fill, minmax(240px, 1fr))브라우저가 가능한 한 많은 240 픽셀 최소 열을 맞추고 채우기 위해 늘리도록 지시하는. 생성기는 고정 개수 시작점을 제공합니다; 그 하나의 편집은 그것을 자체 포장 그리드로 바꿉니다. 시작점을 이해하는 것이 편집을 명백하게 만드는 것이며,그것은 붙여 넣기보다는 구축하여 레이아웃을 학습하는 전체 인수입니다. 이런 방식으로 작동하는 도구 세트를 조립하는 더 넓은 경우는 조각에 있습니다 웹 개발자 툴킷그리고 그 뒤에 있는 워크플로 습관은 다음과 같습니다 개발자 생산성 도구 가이드.
CSS Grid 를 지원하는 브라우저는 무엇입니까?
CSS 그리드는 현재의 모든 브라우저에서 지원되며 수년 동안 사용되어 왔습니다. 이 생성기가 방출하는 속성은 표준이며 접두사가 없으므로 출력은 크롬,파이어 폭스,사파리 및 에지에서 프로젝트가 현실적으로 오늘날 목표로하는 모든 브라우저에 대한 공급 업체 접두사 또는 대체없이 작동합니다. 그만큼 gap 널리 착륙한 마지막 조각이었던 그리드 컨테이너의 속성도 이제 보편적으로 지원됩니다. 즉,복사하는 CSS 는 작성된 대로 생산 준비가 되어 있다는 의미입니다. 이는 그리드 초기에는 항상 사실이 아니었고 모델이 마침내 점진적인 향상이 아닌 기본 선택인 이유 중 하나입니다. 기본 규칙의 경우 W3C 의 CSS 그리드 레이아웃 모듈 레벨 1 사양이 기본 소스이며 생성기가 이를 따를 수 있는 직관을 제공한 후에는 읽을 가치가 있습니다.
이와 함께 더 넓은 시각적 툴킷을 구축하고 있다면 경계 반경 생성기 그리고 CSS 클램프 발생기 세트를 마무리하고 코딩 도구 가이드 내가 가장 많이 도달한 것들을 수집합니다.
자주 묻는 질문
CSS 그리드 생성기 란 무엇입니까?
CSS 그리드 생성기는 선택한 설정에서 CSS 그리드 레이아웃 코드를 빌드하는 시각적 도구입니다. 열,행, 트랙 크기,간격 및 정렬을 선택하면 결과의 실시간 미리보기와 함께 그리드-템플릿 CSS 를 출력합니다.
CSS Grid 에서 fr 단위는 무엇을 의미합니까?
fr 단위는 그리드 컨테이너의 여유 공간의 일부를 나타냅니다. grid-template-columns: repeat (3,1fr) 는 각각 사용 가능한 너비와 리플로우의 동일한 몫을 차지하는 3 개의 열을 생성하며 컨테이너 크기가 조정됩니다.
CSS Grid 와 flexbox 의 차이점은 무엇입니까?
CSS Grid 는 행과 열을 함께 제어하는 2 차원 모델로 페이지 레이아웃과 카드 그리드에 이상적입니다. Flexbox 는 단일 축을 따라 항목을 배치하는 1 차원 모델로서 도구 모음과 행에 이상적입니다. 이들은 상호 보완적이며 종종 함께 사용됩니다.
반응형 그리드는 어떻게 만들까요?
트랙이 사용 가능한 너비를 공유하도록 fr 단위를 사용하고, 반복()을 minmax()와 결합하고 자체적으로 래핑되는 그리드에 대해 자동 채우기 또는 자동 맞춤을 결합합니다. 이 생성기는 fr 트랙을 확장할 수 있는 시작점으로 사용하여 반복()을 방출합니다.
CSS Grid 에서 갭 속성은 무엇입니까?
간격은 격자 궤도 사이 간격을 놓습니다. 단 하나 가치는 행과 란 둘 다를 동등하게 간격을 둡니다; 2 개의 가치는 행 간격과 란 간격을 따로따로,순서 행 간격 그 후에 열 간격 놓습니다.
생성된 그리드 CSS는 생산에 사용하기에 안전한가요?
예. CSS Grid 는 모든 최신 브라우저에서 지원되며 도구는 고정되지 않은 표준 속성을 방출합니다. 모든 처리는 브라우저에서 발생하므로 아무 것도 업로드되지 않으며 도구는로드 된 후 오프라인으로 작동합니다.
CSS Grid Generator 는 모바일에서 작동합니까?
예. 이 도구는 완벽하게 반응하며 휴대폰,태블릿 및 데스크톱의 모든 최신 브라우저에서 작동합니다. 생성된 CSS 는 빌드하는 장치에 관계없이 동일합니다.
이 CSS 그리드 생성기는 무료입니까?
예. 가입도 없고 워터마크도 없고 사용 제한도 없이 완전 무료입니다. 생산하는 그리드 CSS 는 모든 프로젝트에서 사용할 수 있는 사용자의 것입니다.
