style18 CSS[6] 그리드안에 그리드 넣기 중첩 된 격자는 격자 항목이 격자 자체가되는 곳입니다. 다음은 간단한 개요 및 데모입니다.그리드 항목은 CSS 그리드 레이아웃으로 그리드가 될 수 있습니다. 그런 다음 모눈 항목을 모눈 항목 안에 배치하여 중첩 된 모눈을 만들 수 있습니다.중첩 된 표를 만들려면 그리드 항목에 display: grid(또는 display: inline-grid)를 적용 하면 그리드가됩니다. display: subgrid서브 그리드를 작성하는 데 적용 할 수도 있습니다 . 서브 그리드에 대한 자세한 내용은 아래를 참조하십시오.다음은 그 예입니다.Stack editor Unstack editor Editor PreviewExample#outer-grid { display: grid; grid-template-rows: 1fr.. 2018. 12. 21. CSS[5] 반응 형 그리드 생성 그리드에는 고정 된 크기의 그리드 아이템이 뷰포트 크기에 따라 위치를 이동할 수있는 "응답 성"기능이 있습니다. 그리드를 미디어 쿼리와 결합하여 더 작은 뷰포트에 다른 그리드를 제공 할 수도 있습니다.그리드 레이아웃은 컨테이너에 맞는 특정 크기의 트랙을 많은 수로 그리드를 생성 할 수있게 해주는 auto-fill및 auto-fit키워드를 제공합니다 . 그리드 항목은 브라우저의 크기를 조정할 때 위치가 바뀌는 반응 형 그리드가 될 수 있습니다.auto-fill키워드사용 예 auto-fill: RunStack editor Unstack editor Editor PreviewExample#grid { display: grid; grid-template-columns: repeat(auto-fill, minma.. 2018. 12. 20. CSS[4] 그리드로 웹 사이트 레이아웃 만들기 여기서 CSS 그리드 레이아웃의 "ASCII art"구문을 사용하여 3 열 웹 사이트 레이아웃을 생성합니다.그리드에는 직관적 인 "ASCII 아트"구문이 포함되어있어 코드 내에서 레이아웃을 사실상 볼 수 있으므로 레이아웃을 쉽게 작성하고 수정할 수 있습니다. 심지어 몇 초 안에 큰 변화가 일어날 수 있습니다. 이 직관적 인 구문은 반응 형 웹 디자인에도 도움이됩니다. 그리드를 사용할 때 다른 장치에 대한 다른 레이아웃을 만드는 것은 아주 간단합니다.이제 다음과 같은 웹 사이트 레이아웃을 만듭니다.CSS 그리드 레이아웃이 나오기 전에이 레이아웃은 제대로 작동하도록하는 것과 관련하여 종종 "거룩한 레이아웃"이라고 불 렸습니다. CSS 그리드 레이아웃을 사용하면 이러한 레이아웃을 쉽게 만들 수 있습니다.코드는.. 2018. 12. 20. 이전 1 2 다음
