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…
…and then come back here if you have any problems. 
coothead
The choice of html element depends on what is semantically appropriate for the content, it has nothing to do with layout or styling.
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 
I was hoping to use something that is more supported, browser wise without added shims etc 
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
Impressive 
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 
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.
coothead
With a minor adjustment of @coothead’s code you could avoid relying on a magic number to move div 5 up. 
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.
Unfortunately, all of the code that I posted relied on “magic numbers”. 
coothead
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.