CSS 전용 그리드 레이아웃

Question

저는 현재 다양한 이유로 인해 HTML/CSS가있는 그리드 레이아웃을 만들려고합니다 (부트 스트랩 등을 알고 있지만이 상황에서는 아무런 옵션이 없습니다. &이며 마크 업 요소를 추가 할 수 없습니다).

<div> 
    <h3>title here</h3> 
    <ul> 
    <li>list-item</li> 
    <li>list-item</li> 
    <li>list-item</li> 
    </ul> 
    <h3>title 2 here</h3> 
    <ul> 
    <li>list-item</li> 
    <li>list-item</li> 
    </ul> 
    <h3>title 3 here</h3> 
    <ul> 
    <li>list-item</li> 
    </ul> 
</div> 

가 지금은 그리드 레이아웃을 만들 수 있도록하고 싶습니다 :

나는 (마다 리의과 UL이있는 제목 컨테이너 사업부) 다음과 같은 코드가 있습니다. 의미 각 제목은 너비가 33 %이므로 서로 옆에 3을 가질 수 있습니다.

문제는 각 시간 사이에 ul가 있다는 것입니다. 그래서 거기에 가능한 부동 솔루션입니다 그리드 레이아웃을 결과로 가질 수 있습니다.

h3 { 
    width: 33%; 
    float: left; 
    display: inline-block; 
} 

ul{ 
    float: left; 
    width: 33%; 
    display: inline-block; 
} 

이 모든 프레임 워크없이 -

TITLE - TITLE - TITLE 
    ul   ul   ul 

.

미리 감사드립니다.

Answer 1

여기 그렇지 않은 왼쪽에서 오른쪽으로, 위에서 아래로 흘러주의 마십시오 기존의 마크 업

를 사용하여 샘플입니다.

---

div { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 220px;    /* 30px + 80px times 2 row */ 
 
} 
 
div > * { 
 
    width: 33.33%; 
 
    box-sizing: border-box; 
 
} 
 

 
h3 { 
 
    margin: 0; 
 
    height: 30px; 
 
} 
 
ul { 
 
    margin: 0; 
 
    height: 80px; 
 
}

<div> 
 
    <h3>title here</h3> 
 
    <ul> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
    </ul> 
 
    <h3>title 2 here</h3> 
 
    <ul> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
    </ul> 
 
    <h3>title 3 here</h3> 
 
    <ul> 
 
    <li>list-item</li> 
 
    </ul> 
 
    <h3>title 2 here</h3> 
 
    <ul> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
    </ul> 
 
    <h3>title 3 here</h3> 
 
    <ul> 
 
    <li>list-item</li> 
 
    </ul> 
 
</div>

는 의견에 따라 업데이트

시각적으로 왼쪽에서 오른쪽으로 빌드를 수행하는 한 가지 가능성은 order 재산

를 사용하여,이

div { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 220px;    /* 30px + 80px times 2 row */ 
 
} 
 
div > * { 
 
    width: 33.33%; 
 
    box-sizing: border-box; 
 
} 
 
h3 { 
 
    margin: 0; 
 
    height: 30px; 
 
} 
 
ul { 
 
    margin: 0; 
 
    height: 80px; 
 
} 
 
div :nth-child(3), 
 
div :nth-child(4) { 
 
    order: 2; 
 
} 
 
div :nth-child(5), 
 
div :nth-child(6) { 
 
    order: 4; 
 
} 
 
div :nth-child(7), 
 
div :nth-child(8) { 
 
    order: 1; 
 
} 
 
div :nth-child(9), 
 
div :nth-child(10) { 
 
    order: 3; 
 
}

<div> 
 
    <h3>title 1 here</h3> 
 
    <ul> 
 
    <li>1 list-item</li> 
 
    <li>1 list-item</li> 
 
    <li>1 list-item</li> 
 
    </ul> 
 
    <h3>title 2 here</h3> 
 
    <ul> 
 
    <li>2 list-item</li> 
 
    <li>2 list-item</li> 
 
    </ul> 
 
    <h3>title 3 here</h3> 
 
    <ul> 
 
    <li>3 list-item</li> 
 
    </ul> 
 
    <h3>title 4 here</h3> 
 
    <ul> 
 
    <li>4 list-item</li> 
 
    <li>4 list-item</li> 
 
    </ul> 
 
    <h3>title 5 here</h3> 
 
    <ul> 
 
    <li>5 list-item</li> 
 
    </ul> 
 
</div>

Answer 2

다음과 같은 의미입니까? https://jsfiddle.net/jw22Lqgo/

h3 { 
display: inline-block; 
} 

ul{ 
display: block; 
} 

.col { 
width: 32%; 
border: 1px solid red; 
display: inline-block; 
} 

.container { 
width: 960px; 
}