Should we do this with flex? or JS will be needed

HTML & CSS
41

Hi there codeispoetry,

I have now amended my code to match your image. :winky:

<!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">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    box-sizing: border-box;
 }
.top-left > div:first-of-type{
    width: 49.5%;
    padding: 1em;
    margin-bottom: 0.25em;
    border: 1px solid #999;
    box-sizing: border-box; 
    background-color: #fff;
 }
.top-left > div:first-of-type > div {
    width: 100%;
    padding: 1em;
    box-sizing: border-box;
    background-color: #eee;
 }
.top-right {
    width: 49.5%;
    justify-content: space-between;
 }
.top-right > div {
    width: 49.5%;
    padding: 1em;
    margin-bottom: 0.25em;
    border: 1px solid #999;
    box-sizing: border-box; 
    background-color: #fff;
 }
.top-right > div div {
    width: 100%;
    padding: 1em;
    box-sizing: border-box; 
    background-color: #eee;
 }
.bottom > div {
    width: 24.5%;
    padding: 1em;
    margin-bottom: 0.25em;
    border: 1px solid #999;
    box-sizing: border-box; 
    background-color: #fff;
 }
.bottom > div div {
    width: 100%;
    padding: 1em;
    box-sizing: border-box; 
    background-color: #eee;
 }
@media ( max-width: 50em ) {
.top-left > div:first-of-type,
.top-right, 
.top-right > div,
.bottom > div {
    width: 100%;
  }
 }
</style>

</head>
<body> 

 <div class="container top-left">
  <div>
   <div>0</div>
  </div>
 <div class="container top-right">
  <div>
   <div>1</div>
  </div>
  <div>
   <div>2</div>
  </div>
  <div>
   <div>3</div>
  </div>
  <div>
   <div>4</div>
  </div>
  </div>
</div>

 <div class="container bottom">
  <div>
   <div>5</div>
  </div>
  <div>
   <div>6</div>
  </div>
  <div>
   <div>7</div>
  </div>
  <div>
   <div>8</div>
  </div>
 </div>

</body>
</html>

coothead

3 Likes
42

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