Best CSS layout for uneven squares [Solved]

Hi all, I’ve been trying a number of different techniques to achieve the attached layout, just can’t quite get what I’m after.

Hoping for some guidance, what is the best way to do this?

Floats
Inline-block elements
Flex

li’s or divs ?

The image will be used for desktop.
Mobile will have the normal stacked 100% all same size.

Thanks, Barry

Hi there computerbarry,

I would suggest that you try this link…

CSS Grid Layout

…and then come back here if you have any problems. :winky:

coothead

3 Likes

The choice of html element depends on what is semantically appropriate for the content, it has nothing to do with layout or styling.

2 Likes

Thanks coothead!

Yes this is good, haven’t quite took the plunge yet into grid this latest way of doing things, not the best support :neutral_face:

I was hoping to use something that is more supported, browser wise without added shims etc :thinking:

Is there not another way?

@SamA74 Yes thanks, I’ll leave this for now until we figure out the CSS.

Barry

There is usually another way in CSS, but not always a better way.

Grid support is so not bad now.

Again content is a concern, do the boxes contain text or images? They scale in quite different ways.

I’ve used the grid layout based on a basic tutorial. Nothing tested in IE as yet.
Looks good in Chrome - https://codepen.io/anon/pen/LagdWj

Wondering how I can change 2 and 5 blocks to reflect my layout — half sizes?

I’ll also be adding background images, not sure if that will change anything?

Barry

Hi there computerbarry,

If you would rather use “float”, then here is an example
that matches the image in your original post…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#container {
    width: 64vw;
    margin: auto;
    overflow: hidden;
 }
#container > div {
    float: left;
    border: 1px solid #999;
    border-radius: 0.8vw;
    background-color: #a29896;
    box-shadow: inset 0 0 1.2vw rgba( 0, 0, 0, 0.6 );
 }
#container > div:nth-of-type(1) {
    width: 39.909vw;
    height: 24.344vw;
    margin-bottom: 0.487vw;
 }
#container > div:nth-of-type(2) {
    width: 23.604vw;
    height: 19.467vw;
    margin-left: 0.487vw;
 }
#container > div:nth-of-type(3) {
    clear: both;
    width: 19.711vw;
    height: 39.909vw;
    margin-right: 0.487vw;
 }
#container > div:nth-of-type(4) {
    width: 19.711vw;
    height: 19.711vw;
    margin-right: 0.487vw;
 }
#container > div:nth-of-type(5) {
    width: 23.604vw;
    height: 24.577vw;
    margin-top:-4.867vw;
 }
#container > div:nth-of-type(6) {
    width: 43.802vw;
    height: 19.711vw;
    margin-top: 0.487vw;
}
</style>

</head>
<body> 

 <div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>

</body>
</html>

coothead

3 Likes

Impressive :sunglasses:

I see what you did there, negative margin — good catch.
I’ve built small codepen

I’ll just need to add media query for the mobile.
This is good, two possible solutions now will do some testing tomorrow and see which works best.

And you never know, maybe a flex solution :grin:
Or flex and grid together — seems this is going to be the way forward in time based on CSS Tricks grid guide.

And some more information for IE - Medium IE example

Cool, and thanks for your help!

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

With a minor adjustment of @coothead’s code you could avoid relying on a magic number to move div 5 up. :slight_smile:

To make div 5 go up by itself: Make it float none and overflow hidden.
To get the top gap: Remove its negative top margin and add a bottom margin to div 2.

2 Likes

Unfortunately, all of the code that I posted relied on “magic numbers”. :rofl:

coothead

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.