요소는 CSS 그리드에 포장하지

Question

안녕하십니까, 웹 개발에 예쁜 새

, 나는 아름다운 CSS 그리드 도구를 사용하는 방법을 배우려고 노력하고있어,하지만 실제로이 붙어있어 :

를

다음 열 (같은 열 서식 파일)에서 카드가 자동으로 하나씩 흐르게하고 싶지만 실제로는 브라우저에서 카드 하나만 볼 수 있습니다.

vh에 내 .wrapper 높이로 문제가 있다고 생각했습니다. px과 %을 시도했지만 해결책을 찾지 못했습니다.

누군가가 문제에 대한 아이디어가 있거나 내 (나쁜 ... 또는 좋은?) 코딩 방법에 관한 의견이 있으면 정말로 감사하겠습니다.

/* Just some horrible stylization to better see boxes */ 
 

 
body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
div { 
 
    background-color: #f1c40f; 
 
    border: 1px solid white; 
 
} 
 

 
/* Definition of the 3 grids used*/ 
 

 
.wrapper { 
 
    height: 100vh; 
 
    box-sizing: border-box; 
 
    display: grid; 
 
    align-content: stretch; 
 
    justify-content: stretch; 
 
    grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr; 
 
    grid-template-rows: 1fr 5fr 1fr; 
 
    grid-template-areas: "header header header header header header header" 
 
         "main main main main main main main" 
 
         "footer footer footer footer footer footer footer" 
 
} 
 

 
.main { 
 
    grid-area: main; 
 
    display: grid; 
 
    grid-template-columns: 60px 7fr 1fr; 
 
    grid-template-rows: 1fr; 
 
    grid-template-areas: "sidebar box-content box-content"; 
 
} 
 

 
/* This box-content's grid-template-columns have many ones, it is done to modify 
 
only the grid-template-areas with media-queries for larger screen*/ 
 

 
.box-content { 
 
    grid-area: box-content; 
 
    display: grid; 
 
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr; 
 
    grid-template-rows: 1fr 7fr 1fr; 
 
    grid-auto-flow: row; 
 
    grid-template-areas: ". . . . . . . . ." 
 
         ". card card card card card card card." 
 
         ". . . . . . . . ."; 
 
} 
 

 
/* Definition of the different element's grid-area*/ 
 

 
.header { 
 
    grid-area: header; 
 
} 
 

 
.sidebar { 
 
    grid-area: sidebar; 
 
} 
 

 

 
.card { 
 
    grid-area: card; 
 
} 
 

 
.footer { 
 
    grid-area: footer; 
 
}

<!-- I apologize for non-semantic tags, only a quick prototyping --> 
 

 
    <div class="wrapper"> 
 
    <div class="header"> Header Header Header Header Header</div> 
 
    <div class="main"> 
 
     <div class="sidebar">Sidebar Sidebar </div> 
 
     <div class="box-content"> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     </div> 
 
    </div> 
 
    <div class="footer"> Footer Footer Footer Footer Footer </div> 
 
    </div>

감사

Answer 1

당신의 카드를 포장하기 위해, 행 단위의 auto-fit 및 minmax 기능을 사용합니다. 여기 Getting columns to wrap in CSS Grid

기본 데모입니다 : jsFiddle (재 크기 효과를 볼 수있는 브라우저 폭)

여기에 데모 코드입니다 :

.wrapper { 
 
    height: 100vh; 
 
    display: grid; 
 
    align-content: stretch; 
 
    justify-content: stretch; 
 
    grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr; 
 
    grid-template-rows: 1fr 5fr 1fr; 
 
    grid-template-areas: "header header header header header header header" 
 
         "main main main main main main main" 
 
         "footer footer footer footer footer footer footer" 
 
} 
 

 
.main { 
 
    grid-area: main; 
 
    display: grid; 
 
    grid-template-columns: 60px 7fr 1fr; 
 
    grid-template-rows: 1fr; 
 
    grid-template-areas: "sidebar box-content box-content"; 
 
} 
 

 
.box-content { 
 
    grid-area: box-content; 
 
    align-items: start; 
 
    align-content: start; 
 
    display: grid; 
 
    grid-gap: 10px; 
 
    padding: 10px; 
 
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
 
} 
 

 
.header { grid-area: header; } 
 
.sidebar { grid-area: sidebar; } 
 
.footer { grid-area: footer; } 
 

 

 
body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
div { 
 
    background-color: #f1c40f; 
 
    border: 1px solid white; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
}

<div class="wrapper"> 
 
    <div class="header"> Header Header Header Header Header</div> 
 
    <div class="main"> 
 
    <div class="sidebar">Sidebar Sidebar </div> 
 
    <div class="box-content"> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div> 
 
     <div class="card"> Card Card Card Card Card Card </div>  
 
    </div> 
 
    </div> 
 
    <div class="footer"> Footer Footer Footer Footer Footer </div> 
 
</div>

이

여기에 대한 자세한 설명입니다

Answer 2

/* Just some horrible stylization to better see boxes */ 
 

 
body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
div { 
 
    background-color: #f1c40f; 
 
    border: 1px solid white; 
 
} 
 

 
/* Definition of the 3 grids used*/ 
 

 
.wrapper { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    
 
    align-content: stretch; 
 
    justify-content: stretch; 
 
    grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr; 
 
    grid-template-rows: 1fr 5fr 1fr; 
 
    grid-template-areas: "header header header header header header header" 
 
         "main main main main main main main" 
 
         "footer footer footer footer footer footer footer" 
 
} 
 

 
.main { 
 
    grid-area: main; 
 
    display: grid; 
 
    grid-template-columns: 60px 7fr 1fr; 
 
    grid-template-rows: 1fr; 
 
    grid-template-areas: "sidebar box-content box-content"; 
 
} 
 

 
/* This box-content's grid-template-columns have many ones, it is done to modify 
 
only the grid-template-areas with media-queries for larger screen*/ 
 

 
.box-content { 
 
    grid-area: box-content; 
 
    grid-template-rows: 1fr 7fr 1fr; 
 
    grid-auto-flow: row; padding:20px; 
 
    
 
    
 
} 
 

 
/* Definition of the different element's grid-area*/ 
 

 
.header { 
 
    grid-area: header; 
 
} 
 

 
.sidebar { 
 
    grid-area: sidebar; 
 
} 
 

 

 
.card-1 { 
 
    display: grid; 
 
    width: 100%; margin-bottom:20px; min-height:500px; 
 
    
 
    
 
} 
 

 
.footer { 
 
    grid-area: footer; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <title>Layout 1</title> 
 
</head> 
 
<body> 
 

 
    <!-- I apologize for non-semantic tags, only a quick prototyping --> 
 

 
    <div class="wrapper"> 
 
    <div class="header"> Header Header Header Header Header</div> 
 
    <div class="main"> 
 
     <div class="sidebar">Sidebar Sidebar </div> 
 
     <div class="box-content"> 
 
     <div class="card-1"> Card Card Card Card Card Card </div> 
 
     <div class="card-1"> Card Card Card Card Card Card </div> 
 
     <div class="card-1"> Card Card Card Card Card Card </div> 
 
     <div class="card-1"> Card Card Card Card Card Card </div> 
 
     </div> 
 
    </div> 
 
    <div class="footer"> Footer Footer Footer Footer Footer </div> 
 
    </div> 
 
</body> 
 
</html>

당신은 당신의 솔루션을 확인하십시오 수 있습니다

더 예 - https://gridbyexample.com/examples/