⚡️ FlashGrid: 메쉬 시스템을 구축하여 CSS 메쉬를 학습합니다.

최근에 나는 CSS 격자를 바탕으로 경량급 격자 시스템을 구축하려는 생각을 시험해 왔다.
우리는 CodyFrame에 플렉스박스를 기반으로 하는 격자 시스템을 가지고 있다.그러나 CSS 격자에는 Flexbox가 제공할 수 없는 강력한 기능이 많아서 저는 최종적으로 Flash 격자를 만들었습니다.
Flash Grid를 만드는 모든 프로세스를 공유합니다.만약에 당신이 CSS 격자에 대한 정보를 더 알고 싶다면 이것은 좋은 출발점이다. 왜냐하면 우리는 CSS 격자의 주요 속성을 토론할 것이기 때문에 우리는 이 강력한 레이아웃 시스템을 충분히 이용하기 위해 실용적인 기교를 공유할 것이다.
이 자습서를 건너뛰려면 코드를 직접 가져오십시오.

📦 Download Flash Grid on Github

🕹 Take if for a spin on Codepen

우리 시작합시다!🙌
첫 번째 단계는 클래스 .grid을 만드는 것입니다.

$grid-columns: 12 !default;

.grid {
  --grid-cols: #{$grid-columns};
  display: grid;
  grid-gap: var(--grid-gap, 0); // default grid-gap = 0
  grid-template-columns: repeat(var(--grid-cols), 1fr); // grid of 12 flexible columns

  > * {
    grid-column-end: span var(--grid-cols); // each grid item takes full-width by default
  }
}

격자열의 수량을 정의할 때, 우리는 !default SCSS flag을 사용하여 격자 시스템을 모듈로 가져오는 것을 방지하고, 이 값이 사용자 정의할 수 있기를 희망합니다.grid-template-columns은 우리가 정의한 격자 레이아웃의 속성입니다. 우리는 12개의 응답열이 필요합니다.각 열의 너비는 1피트이다.Fr(fraction unit)는 사용 가능한 공간의 1부에 해당하는 스마트 유닛이다.우리의 격자는 12x1fR열로 구성되어 있기 때문에, 모든 유연한 열은 사용 가능한 폭의 1/12를 차지한다.
repeat () 함수는 단일 너비 값 (1fr) 을 전달할 수 있도록 합니다.동일한 메쉬를 정의하는 또 다른 방법은 다음과 같습니다.

.grid {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; // 🙈
}

...하지만, 너도 알다시피...그렇게 우아하지 않아!
다음은 방금 작성한 메쉬에 대한 간략한 개요입니다.

위의 화면 캡처에서 열 사이의 숫자를 주의하십시오. (지금은 맨 위의 정수만 주목합니다.)이러한 행 번호는 메쉬 항목을 배치하는 데 사용할 수 있습니다..grid 코드 세그먼트에서 우리는 모든 격자 항목을 대상으로 grid-column-end 값을 span 12으로 설정했다.
기본적으로 모든 하위 대상이 사용 가능한 폭을 차지하기를 원합니다.grid-column-end은 격자 항목의 끝 위치를 지정하는 데 사용됩니다.이 속성을 사용하여 결승선을 설정할 수 있습니다(예: grid-column-end: 3;).단, "span"이라는 신기한 단어를 사용하면, 격자 항목이 얼마나 많은 열을 차지해야 하는지 정의할 수 있습니다.예를 들어, grid-column-end: span 12;은 "이 요소를 12열에 걸쳐 배치"를 나타냅니다.
격자 항목의 기본 12열 경계를 왜 설정합니까?우리 먼저 핸드폰을 씁시다.대부분의 경우, 격자 항목이 전체 너비 (12열) 를 차지하고, 더 큰 화면에서 더 적은 열을 차지한다고 가정할 수 있다.우리의 기본값은 격자 항목 .col-12 (span 12) 을 수동으로 지정할 필요가 없습니다.
열 수를 CSS 사용자 정의 속성으로 설정하여 구성 요소 레벨(또는 다른 유틸리티 클래스 만들기)에서 변경되지 않도록 합니다.예를 들면 다음과 같습니다.

.grid--2 {
  --grid-cols: 2;
}

다음은 grid-gap 속성에 대한 유틸리티 클래스를 정의할 수 있습니다.

.grid-gap-xxxxs { --grid-gap: var(--space-xxxxs, 0.125rem); }
.grid-gap-xxxs  { --grid-gap: var(--space-xxxs, 0.25rem); }
.grid-gap-xxs   { --grid-gap: var(--space-xxs, 0.375rem); }
.grid-gap-xs    { --grid-gap: var(--space-xs, 0.5rem); }
.grid-gap-sm    { --grid-gap: var(--space-sm, 0.75rem); }
.grid-gap-md    { --grid-gap: var(--space-md, 1.25rem); }
.grid-gap-lg    { --grid-gap: var(--space-lg, 2rem); }
.grid-gap-xl    { --grid-gap: var(--space-xl, 3.25rem); }
.grid-gap-xxl   { --grid-gap: var(--space-xxl, 5.25rem); }
.grid-gap-xxxl  { --grid-gap: var(--space-xxxl, 8.5rem); }
.grid-gap-xxxxl { --grid-gap: var(--space-xxxxl, 13.75rem); }

간격 변수는 CodyFrame의 일부분이다.각 변수에 지정된 예비(fallback)(변수가 정의되지 않은 경우 쉼표 뒤에 값을 적용하는 경우) 또는 자체 간격 배율로 대체할 수 있습니다.grid-gap 속성은 격자 항목 사이의 공간을 정의하는 데 사용됩니다.
기본 격자 시스템을 완성하기 위해서 우리는 .col 종류를 정의해야 한다.

@for $i from 1 through $grid-columns {
  .col-#{$i}  { grid-column-end: span #{$i}; }
}

SASS@for 루프를 사용하여 .col 변수에 지정된 열 수에 따라 $grid-columns 클래스를 생성합니다.
컴파일된 CSS는 다음과 같습니다.

.col-1  { grid-column-end: span 1; }
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }

col 클래스는 격자 항목이 차지하는 열 수를 지정합니다.'span'이라는 단어는'x열을 뛰어넘어 요소를 뛰어넘는다'는 뜻을 기억하세요. 그 중에서 x는 span 다음에 지정한 숫자입니다.

CSS 그리드 향신료 추가

결론적으로 Flash Grid의 기본 버전은 메쉬 정의, 메쉬 간격 및col 유틸리티 클래스입니다.
이제 향료를 넣을 때가 됐어!💃
다음은 .grid-auto-cols 유틸리티 클래스입니다.

.grid-auto-cols { // cols = same size
  display: grid;
  grid-gap: var(--grid-gap, 0);
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

이 클래스는 .grid 클래스와 유사하지만, 우리는 많은 열을 설정하지 않았다.auto-fit은 .grid류 중의 12를 교체한다.이것은 CSS 격자를 열의 너비 값(repeat() 함수의 두 번째 값)에 따라 열 수를 결정하도록 한다는 것을 의미한다.
근데 잠깐만!너비 값 (.grid 클래스의 1fr) 은minmax () 함수로 대체되었습니다.그것의 서면 의미는 한 열의 최소 너비는 0이고, 최대 값은 1fr이다.우리는 열 너비를 위해 일련의 값을 설정하고 있다.
결과는 다음과 같다. 그 중의 모든 열의 폭은 같고, 그 내용이나 격자 항목의 수량에 상관없다.

비슷한 방법으로 .grid-auto-{size} 유틸리티 클래스를 만들었습니다.

.grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl { // auto-sized grid
  display: grid;
  grid-gap: var(--grid-gap, 0);
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr));
}

.grid-auto-xs { --col-min-width: 8rem; }
.grid-auto-sm { --col-min-width: 10rem; }
.grid-auto-md { --col-min-width: 15rem; }
.grid-auto-lg { --col-min-width: 20rem; }
.grid-auto-xl { --col-min-width: 25rem; }

.grid-auto-cols과 달리 이들 신류의 최소 너비는 --col-min-width과 같다.결과는 응답 격자입니다. 충분한 공간 (minmax () 함수에서 지정한 최소 너비) 이 있을 때 새 열을 추가합니다.

🔥 이걸로격자 자동 유틸리티 클래스(.grid-auto-cols 및 .grid-auto-{size})는 격자 항목에 .col 클래스를 사용하지 않고 응답 레이아웃을 만들 수 있습니다.사실 이 결과를 얻으려면 .col류를 사용해서는 안 된다.격자 자동 클래스가 정상적으로 작동할 수 있습니다.
마지막으로 격자선 번호를 이용하기 위해 우리는 새로운 실용 프로그램 클래스인 col-start-{line-number}과 .col-end-{line-number}을 만들 수 있다.

@for $i from 1 through $grid-columns {
  .col-start-#{$i} { grid-column-start: #{$i}; }
  .col-end-#{$i+1} { grid-column-end: #{$i+1}; }
}

이거.col 시작 과정은 .col-start-1에서 col-start-12까지입니다.col-end류는 .col-end-2에서 .col-end-13까지.
격자 항목이 특정한 시작점과 끝점을 뛰어넘기를 원한다면 사용하십시오.
행 번호는 다음과 같습니다.

밑부분의 음수는 같은 줄을 겨냥한 또 다른 방법이다.열 수를 고려하지 않고 마지막 비헤이비어를 목표로 하려는 경우 다음과 같은 유용한 이유가 있습니다.

.col-end { 
  grid-column-end: -1; 
}

이거.col start/end 클래스에서는 고급 격자를 만들 수 있습니다.

클래스 브레이크 수정자

격자를 서로 다른 단점에서 편집할 수 있도록 클래스 수식자를 추가할 수 있습니다.CodyFrame에서, 우리의 약속은 클래스 (예: col-4@sm) 에 @ {breakpoint} 접두사를 추가하여 목표의 단점을 달성하는 것입니다.
다음은 x-small 브레이크의 클래스 수정자 예입니다.

$breakpoints: (
  xs: 32rem, 
  sm: 48rem,
  md: 64rem,
  lg: 80rem,
  xl: 90rem
) !default;

@mixin breakpoint($breakpoint) {
  @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
}

@include breakpoint(xs) {
  .grid-auto-xs\@xs { --col-min-width: 8rem; }
  .grid-auto-sm\@xs { --col-min-width: 10rem; }
  .grid-auto-md\@xs { --col-min-width: 15rem; }
  .grid-auto-lg\@xs { --col-min-width: 20rem; }
  .grid-auto-xl\@xs { --col-min-width: 25rem; }

  .grid-auto-cols\@xs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@xs  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@xs { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@xs { grid-column-end: #{$i+1}; }
  }

  .col-start-auto\@xs { grid-column-start: auto; }
  .col-end-auto\@xs { grid-column-end: auto; }
}

테스트 버전⚡️ 플래시 그리드

Flash Grid의 테스트 버전이 유용합니다!

📦 Download Flash Grid on Github

Codepen에서 시도해 보십시오.
최종 SCSS 코드:

// ⚡️ Flash Grid
$grid-columns: 12 !default;

.grid, [class*="grid-auto-"] {
  display: grid;
  grid-gap: var(--grid-gap, 0);
}

.grid {
  --grid-cols: #{$grid-columns};
  grid-template-columns: repeat(var(--grid-cols), 1fr);

  > * {
    grid-column-end: span var(--grid-cols);
  }
}

.grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl { // auto-sized grid
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr));
}

.grid-auto-xs { --col-min-width: 8rem; }
.grid-auto-sm { --col-min-width: 10rem; }
.grid-auto-md { --col-min-width: 15rem; }
.grid-auto-lg { --col-min-width: 20rem; }
.grid-auto-xl { --col-min-width: 25rem; }

.grid-auto-cols { // cols = same size
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.grid-gap-xxxxs { --grid-gap: var(--space-xxxxs, 0.125rem); }
.grid-gap-xxxs  { --grid-gap: var(--space-xxxs, 0.25rem); }
.grid-gap-xxs   { --grid-gap: var(--space-xxs, 0.375rem); }
.grid-gap-xs    { --grid-gap: var(--space-xs, 0.5rem); }
.grid-gap-sm    { --grid-gap: var(--space-sm, 0.75rem); }
.grid-gap-md    { --grid-gap: var(--space-md, 1.25rem); }
.grid-gap-lg    { --grid-gap: var(--space-lg, 2rem); }
.grid-gap-xl    { --grid-gap: var(--space-xl, 3.25rem); }
.grid-gap-xxl   { --grid-gap: var(--space-xxl, 5.25rem); }
.grid-gap-xxxl  { --grid-gap: var(--space-xxxl, 8.5rem); }
.grid-gap-xxxxl { --grid-gap: var(--space-xxxxl, 13.75rem); }

@for $i from 1 through $grid-columns {
  .col-#{$i}  { grid-column-end: span #{$i}; }
  .col-start-#{$i} { grid-column-start: #{$i}; }
  .col-end-#{$i+1} { grid-column-end: #{$i+1}; }
}

.col-start { grid-column-start: 1; }
.col-end { grid-column-end: -1; }

// breakpoints
$breakpoints: (
  xs: 32rem, 
  sm: 48rem,
  md: 64rem,
  lg: 80rem,
  xl: 90rem
) !default;

@mixin breakpoint($breakpoint) {
  @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
}

@include breakpoint(xs) {
  .grid-auto-xs\@xs { --col-min-width: 8rem; }
  .grid-auto-sm\@xs { --col-min-width: 10rem; }
  .grid-auto-md\@xs { --col-min-width: 15rem; }
  .grid-auto-lg\@xs { --col-min-width: 20rem; }
  .grid-auto-xl\@xs { --col-min-width: 25rem; }

  .grid-auto-cols\@xs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@xs  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@xs { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@xs { grid-column-end: #{$i+1}; }
  }

  .col-start-auto\@xs { grid-column-start: auto; }
  .col-end-auto\@xs { grid-column-end: auto; }
}

@include breakpoint(sm) {
  .grid-auto-xs\@sm { --col-min-width: 8rem; }
  .grid-auto-sm\@sm { --col-min-width: 10rem; }
  .grid-auto-md\@sm { --col-min-width: 15rem; }
  .grid-auto-lg\@sm { --col-min-width: 20rem; }
  .grid-auto-xl\@sm { --col-min-width: 25rem; }

  .grid-auto-cols\@sm { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@sm  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@sm { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@sm { grid-column-end: #{$i+1}; }
  }

  .col-start-auto\@sm { grid-column-start: auto; }
  .col-end-auto\@sm { grid-column-end: auto; }
}

@include breakpoint(md) {
  .grid-auto-xs\@md { --col-min-width: 8rem; }
  .grid-auto-sm\@md { --col-min-width: 10rem; }
  .grid-auto-md\@md { --col-min-width: 15rem; }
  .grid-auto-lg\@md { --col-min-width: 20rem; }
  .grid-auto-xl\@md { --col-min-width: 25rem; }

  .grid-auto-cols\@md { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@md  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@md { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@md { grid-column-end: #{$i+1}; }
  }

  .col-start-auto\@md { grid-column-start: auto; }
  .col-end-auto\@md { grid-column-end: auto; }
}

@include breakpoint(lg) {
  .grid-auto-xs\@lg { --col-min-width: 8rem; }
  .grid-auto-sm\@lg { --col-min-width: 10rem; }
  .grid-auto-md\@lg { --col-min-width: 15rem; }
  .grid-auto-lg\@lg { --col-min-width: 20rem; }
  .grid-auto-xl\@lg { --col-min-width: 25rem; }

  .grid-auto-cols\@lg { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@lg  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@lg { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@lg { grid-column-end: #{$i+1}; }
  }

  .col-start-auto\@lg { grid-column-start: auto; }
  .col-end-auto\@lg { grid-column-end: auto; }
}

@include breakpoint(xl) {
  .grid-auto-xs\@xl { --col-min-width: 8rem; }
  .grid-auto-sm\@xl { --col-min-width: 10rem; }
  .grid-auto-md\@xl { --col-min-width: 15rem; }
  .grid-auto-lg\@xl { --col-min-width: 20rem; }
  .grid-auto-xl\@xl { --col-min-width: 25rem; }

  .grid-auto-cols\@xl { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@xl  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@xl { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@xl { grid-column-end: #{$i+1}; }
  }

  .col-start-auto\@xl { grid-column-start: auto; }
  .col-end-auto\@xl { grid-column-end: auto; }
}