CSS only grid layout

Question

В настоящее время я пытаюсь создать сетку с HTML/CSS только по разным причинам (я знаю Bootstrap и т. Д., Но это не вариант в этом контексте &, и я не могу добавить элементы разметки).

У меня есть следующий код (контейнер DIV с каждым разом, когда название, которое имеет ул с Ли):

<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> 

Теперь я хотел бы, чтобы быть в состоянии создать сетку-макет. Значение, например. каждый заголовок имеет ширину 33%, поэтому я могу иметь 3 рядом друг с другом.

Проблема в том, что между каждым моментом существует ul. Таким образом, существует возможное плавающее решение, поэтому я могу получить сетку в качестве результата.

TITLE - TITLE - TITLE 
    ul   ul   ul 

-

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

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

и все это без рамки.

Заранее спасибо

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; 
}