CSS only grid layout

Question

I am currently trying to create a grid-layout with HTML/CSS only for various of reasons (I know Bootstrap etc. but that's no option in this context & and I can not add markup elements).

I have the following code (container div with each time a title which has an ul with li's):

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

Now I'd like to be able to create a grid-layout. Meaning e.g. each title is 33% width so I can have 3 next to eachother.

Problem is that there is an ul in between each time. So is there a possible floating solution so I can have a grid layout as result.

TITLE   -    TITLE   -    TITLE
  ul           ul           ul

-

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

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

and all of this without a framework.

Thanks in advance

If you can set fixed sizes it might be possible (I'll give it a try), if not, then there has to be a wrapper around each group ... or you will need a script, which will be somewhat tricky to come up with. — Asons
– Asons, Commented Feb 13, 2017 at 13:34
Fixed sizes should be OK, I can still re-edit them with CSS-only approach by using mediaqueries then — NickVH
– NickVH, Commented Feb 13, 2017 at 13:35
The amount of groups also needs to be known, is that possible? — Asons
– Asons, Commented Feb 13, 2017 at 13:37

Asons · Accepted Answer · 2017-02-15 09:37:49Z

1

Here is a sample using the existing markup

Do note they flow from top to bottom, not left to right.

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>

Updated based on a comment

There is one possibility to do a left-to-right build, visually, by using the order property

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>

edited Feb 15, 2017 at 9:37

answered Feb 13, 2017 at 13:50

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

NickVH Over a year ago

Any chance for this to not be build Top-down but being build left-right

Asons Over a year ago

@Kemagezien Will have a look later today... let you know

Asons Over a year ago

@Kemagezien No, with existing markup it is not possible to make it build left-right, but if you can run a script you could wrap each group, and then it can be built left-right

Asons Over a year ago

@Kemagezien Well, there is one way, though if you have many items it will be tedious to maintain, added a sample to my answer

DevMoutarde · Accepted Answer · 2017-02-13 13:20:08Z

0

You mean something like this? https://jsfiddle.net/jw22Lqgo/

h3 {
display: inline-block;
}

ul{
 display: block;
}

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

.container {
width: 960px;
}

answered Feb 13, 2017 at 13:20

DevMoutarde

6278 silver badges22 bronze badges

3 Comments

DevMoutarde Over a year ago

I set width:32% and not 33% because when adding the border, it is taking some extra space and it cant fit the whole width container.

NickVH Over a year ago

This is indeed what I am trying to achieve but however, I am not able to add a 'col' around each set of h3 and ul.

DevMoutarde Over a year ago

Ooh, you can't add markups? dang, Im trying to find another solution then. But Im afraid you can't get rid of these extra .col if you plan to separate those...

Collectives™ on Stack Overflow

CSS only grid layout

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related