CSS nur Gitter Layout

Question

Ich versuche derzeit, ein Gitter-Layout mit HTML/CSS nur aus verschiedenen Gründen zu erstellen (ich kenne Bootstrap usw. aber das ist keine Option in diesem Kontext & und ich kann Markup-Elemente nicht hinzufügen).

Ich habe den folgenden Code (div-Container mit jedem Mal, wenn ein Titel, der eine ul mit li hat):

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

Nun möchte Ich mag Lage sein, ein Raster-Layout zu erstellen. Bedeutung z.B. Jeder Titel ist 33% breit, so dass ich 3 nebeneinander haben kann.

Problem ist, dass es ein ul zwischen jedem Mal gibt. Also gibt es eine mögliche Floating-Lösung, so dass ich als Ergebnis ein Grid-Layout haben kann.

TITLE - TITLE - TITLE 
    ul   ul   ul 

-

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

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

und all dies ohne einen Rahmen.

Vielen Dank im Voraus

Answer 1

Hier ist ein Beispiel unter Verwendung des vorhandenen Markup

Sie sie von oben nach unten fließen beachten, nicht links nach rechts.

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>

---

Aktualisiert basierend auf einem Kommentar

Es gibt eine Möglichkeit, eine von links nach rechts zu bauen, visuell zu tun, unter Verwendung der order Eigenschaft

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

Sie meinen so etwas? https://jsfiddle.net/jw22Lqgo/

h3 { 
display: inline-block; 
} 

ul{ 
display: block; 
} 

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

.container { 
width: 960px; 
}