Sarath S Nair
Reputation: 613
How can I create a column layout like this using css?
I want to display all my Departments, sub departments, brands like below in a sitemap page. How can I achieve this ?
I already tried with column-count:3 using css. But it is not displaying contents in all the three columns. I want to display all the contents in maximum 3 columns and the contents are dynamic. How can I achieve this layout ?
This is my HTML
<div class="sitemap-dept-panel">
<div class="sitemap-dept-title"><span class="sitemap-dept-name">Electronics</span></div>
<div class="sitemap-sub-dept-panel">
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<div class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</div>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<div class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</div>
</div>
</div>
</div>
I found this one almost same as that of my requirement Walmart.com all department page.
Upvotes: 0
Views: 115
Answers (2)
Asons
Reputation: 87201
In this case I believe flexbox will let you control of how to lay out your content in the best way
.sitemap-sub-dept-panel {
display: flex;
flex-wrap: wrap;
}
.sitemap-sub-dept {
width: 33%;
border: 1px solid #ddd;
}
.sitemap-brands-list-panel {
list-style-type: none;
}<div class="sitemap-dept-panel">
<div class="sitemap-dept-title"><span class="sitemap-dept-name">Electronics</span></div>
<div class="sitemap-sub-dept-panel">
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
</div>
</div>Based on a comment, here is how one can do using column-count
.sitemap-dept-name {
color: blue;
font-size: 24px;
}
.sitemap-sub-dept-panel {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
.sitemap-sub-dept-title {
text-decoration: underline;
font-size: 20px
}
.sitemap-brands-item {
font-size: 16px;
padding: 2px 0 2px 12px ;
}<div class="sitemap-dept-panel">
<div class="sitemap-dept-title">
<span class="sitemap-dept-name">Electronics</span>
</div>
<div class="sitemap-sub-dept-panel">
<div class="sitemap-sub-dept-title">Mobile</div>
<div class="sitemap-brands-item">Samsung</div>
<div class="sitemap-brands-item">Apple</div>
<div class="sitemap-brands-item">Motorola</div>
<div class="sitemap-brands-item">Lava</div>
<div class="sitemap-sub-dept-title">Accessories</div>
<div class="sitemap-brands-item">Case</div>
<div class="sitemap-brands-item">Screen Guard</div>
<div class="sitemap-brands-item">Headphones</div>
<div class="sitemap-brands-item">Cables</div>
<div class="sitemap-brands-item">Powerbanks</div>
<div class="sitemap-brands-item">Charger</div>
<div class="sitemap-sub-dept-title">Mobile</div>
<div class="sitemap-brands-item">Samsung</div>
<div class="sitemap-brands-item">Apple</div>
<div class="sitemap-brands-item">Motorola</div>
<div class="sitemap-brands-item">Lava</div>
<div class="sitemap-sub-dept-title">Accessories</div>
<div class="sitemap-brands-item">Case</div>
<div class="sitemap-brands-item">Screen Guard</div>
<div class="sitemap-brands-item">Headphones</div>
<div class="sitemap-brands-item">Cables</div>
<div class="sitemap-brands-item">Powerbanks</div>
<div class="sitemap-brands-item">Charger</div>
<div class="sitemap-sub-dept-title">Mobile</div>
<div class="sitemap-brands-item">Samsung</div>
<div class="sitemap-brands-item">Apple</div>
<div class="sitemap-brands-item">Motorola</div>
<div class="sitemap-brands-item">Lava</div>
<div class="sitemap-sub-dept-title">Accessories</div>
<div class="sitemap-brands-item">Case</div>
<div class="sitemap-brands-item">Screen Guard</div>
<div class="sitemap-brands-item">Headphones</div>
<div class="sitemap-brands-item">Cables</div>
<div class="sitemap-brands-item">Powerbanks</div>
<div class="sitemap-brands-item">Charger</div>
<div class="sitemap-sub-dept-title">Mobile</div>
<div class="sitemap-brands-item">Samsung</div>
<div class="sitemap-brands-item">Apple</div>
<div class="sitemap-brands-item">Motorola</div>
<div class="sitemap-brands-item">Lava</div>
<div class="sitemap-sub-dept-title">Accessories</div>
<div class="sitemap-brands-item">Case</div>
<div class="sitemap-brands-item">Screen Guard</div>
<div class="sitemap-brands-item">Headphones</div>
<div class="sitemap-brands-item">Cables</div>
<div class="sitemap-brands-item">Powerbanks</div>
<div class="sitemap-brands-item">Charger</div>
</div>
</div>Upvotes: 1
Lazar Ljubenović
Reputation: 19764
.sitemap-dept-panel {
width: 100%;
font-family: Arial;
}
.sitemap-dept-title {
color: blue;
font-size: 1.3em;
}
.sitemap-sub-dept-panel {
max-height: 400px;
padding: 1em;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.sitemap-sub-dept-title {
font-size: 1.2em;
}
ul {
list-style-type: none;
}<div class="sitemap-dept-panel">
<div class="sitemap-dept-title">
<span class="sitemap-dept-name">Electronics</span>
</div>
<div class="sitemap-sub-dept-panel">
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
<li>Lava</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
</div>
</div>Flexbox with column layout and allowed wrapping should work. You only have to specify the height.
Upvotes: 0
Related Questions
- How do I create a CSS grid layout like this?
- How can I achieve this layout using CSS Grid?
- How to achieve this grid layout?
- How to accomplish this layout in HTML/CSS?
- How to create a 3 column layout in css?
- How to create such layout in CSS?
- How to achieve this simple 3 column css layout
- How to achieve this layout with CSS?
- CSS column layout
- How to achieve the following layout in HTML + CSS?