0

I'm working on a single screen JavaScript web application. It has several screens and the users can perform some timing tests to get a overall score. I'll admit I'm no expert in GUI design, although I'm perfectly comfortable working with Visual Studio xaml and Android Studio layouts.

At the moment I'm trying to add a new screen, which should have the following layout. It should have a rectangle in the center, with 4 grids of 3x3 squares, one grid in each corner of the center rectangle, and one smaller square in the middle. (The "plus" in the middle can just be a square with an image I guess).

enter image description here

Then there's some JavaScript code which should change the colors of the blocks in several patterns, repeat a couple of times, and ask for certain user input, but that is the easy part.

My problem is getting the screen layout as required on screen, which is much harder than I initially thought. I've found this question but couldn't get it to work properly.

After trying some things I'm stumped, see my code below. Btw, I've just created a separate HTML and CSS file and started experimenting, but if someone can suggest a more effective approach, I'm all ears.

.container {
}

body {
 font-family: Arial;
 background: #080;
 overflow: "hidden";
}

/* color for blocks */
.red    {background: #f00;}
.orange {background: #f80;}
.yellow {background: #ff0;}
.green  {background: #0f0;}
.cyan   {background: #0ff;}
.blue   {background: #00f;}
.purple {background: #f0f;}

/* containing area for the four 3x3 grids */
.block3_area {
 width: 50%;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-right: -50%;
 transform: translate(-50%, -50%);
 background: #0cf;
}

/* one 3x3 grid */
.block3_grid {
 display: grid;
 grid-gap: 1px;
 grid-template-columns: repeat(3, 1fr);
 
 width: 30%;
 height: 30%;
}

.grid_tl {float: top left;}
.grid_tr {float: top right;}
.grid_bl {float: bottom-left;}
.grid_br {float: bottom-right;}

/* the inner blocks of the grid */
.game3block {
 width: 50px;
 height: 50px;
}

.game3block > .game3block {
  padding: 10px;
  background-color: #ccc;
}
<!DOCTYPE HTML>
<html>
 <head>
  <title>3x3 grid css test</title>
 </head>
 <link rel="stylesheet" type="text/css" href="grid.css">

 <body>

  <!-- game 3 -->
  <div class="block3_area">
   <div class="block3_grid grid_tl">
    <!-- top left grid, top row -->
    <div id="block_3_1_1" class="game3block bl3top red">TL-1</div>
    <div id="block_3_1_1" class="game3block bl3top red">TL-2</div>
    <div id="block_3_1_1" class="game3block bl3top red">TL-3</div>

    <!-- top left grid, middle row -->
    <div id="block_3_1_1" class="game3block bl3mid red">TL-4</div>
    <div id="block_3_1_1" class="game3block bl3mid red">TL-5</div>
    <div id="block_3_1_1" class="game3block bl3mid red">TL-6</div>

    <!-- top left grid, bottom row -->
    <div id="block_3_1_1" class="game3block bl3bot red">TL-7</div>
    <div id="block_3_1_1" class="game3block bl3bot red">TL-8</div>
    <div id="block_3_1_1" class="game3block bl3bot red">TL-9</div>
   </div>

   <div class="block3_grid grid_tr">
    <!-- top right grid, top row -->
    <div id="block_3_2_1" class="game3block green">TR-1</div>
    <div id="block_3_2_1" class="game3block green">TR-2</div>
    <div id="block_3_2_1" class="game3block green">TR-3</div>

    <!-- top right grid, middle row -->
    <div id="block_3_2_1" class="game3block green">TR-4</div>
    <div id="block_3_2_1" class="game3block green">TR-5</div>
    <div id="block_3_2_1" class="game3block green">TR-6</div>

    <!-- top right grid, bottom row -->
    <div id="block_3_2_1" class="game3block green">TR-7</div>
    <div id="block_3_2_1" class="game3block green">TR-8</div>
    <div id="block_3_2_1" class="game3block green">TR-9</div>
   </div>

   <div class="block3_grid grid_bl">
    <!-- bottom left grid, top row -->
    <div id="block_3_3_1" class="game3block blue">BL-1</div>
    <div id="block_3_3_1" class="game3block blue">BL-2</div>
    <div id="block_3_3_1" class="game3block blue">BL-3</div>

    <!-- bottom left grid, middle row -->
    <div id="block_3_3_1" class="game3block blue">BL-4</div>
    <div id="block_3_3_1" class="game3block blue">BL-5</div>
    <div id="block_3_3_1" class="game3block blue">BL-6</div>

    <!-- bottom left grid, bottom row -->
    <div id="block_3_3_1" class="game3block blue">BL-7</div>
    <div id="block_3_3_1" class="game3block blue">BL-8</div>
    <div id="block_3_3_1" class="game3block blue">BL-9</div>
   </div>

   <div class="block3_grid grid_br">
    <!-- bottom left grid, top row -->
    <div id="block_3_4_1" class="game3block yellow">BR-1</div>
    <div id="block_3_4_1" class="game3block yellow">BR-2</div>
    <div id="block_3_4_1" class="game3block yellow">BR-3</div>

    <!-- bottom left grid, middle row -->
    <div id="block_3_4_1" class="game3block yellow">BR-4</div>
    <div id="block_3_4_1" class="game3block yellow">BR-5</div>
    <div id="block_3_4_1" class="game3block yellow">BR-6</div>

    <!-- bottom left grid, bottom row -->
    <div id="block_3_4_1" class="game3block yellow">BR-7</div>
    <div id="block_3_4_1" class="game3block yellow">BR-8</div>
    <div id="block_3_4_1" class="game3block yellow">BR-9</div>
   </div>
  </div>
 </body>
</html>

Does anybody know how to get this layout? Any help is appreciated.

BdR
  • 2,770
  • 2
  • 17
  • 36

2 Answers2

0

https://codepen.io/ud-kazi/pen/poJdGLL 

body{
  background:green;
}

.wrapper{
  width:300px;
  height:300px;
  background:pink;
  margin:0 auto;
}

.blue{
  float:left;
  margin-bottom:10px;
}

.blue-box{
  
  margin-right:52px;
}

.blue-box div{
  height:40px;
  width:40px;
  background:blue;
  border:0.5px solid yellow;
  float:left;
}


.red{
  float:left;
   margin-bottom:10px;
}

.red-box{
  
}

.red-box div{
  height:40px;
  width:40px;
  background:red;
  border:0.5px solid yellow;
  float:left;
}


.orange{
  float:left;
}

.orange-box{
 
  margin-right:52px;
}

.orange-box div{
  height:40px;
  width:40px;
  background:red;
  border:0.5px solid orange;
  float:left;
}




.black{
  float:left;
}



.black-box div{
  height:40px;
  width:40px;
  background:black;
  border:0.5px solid yellow;
  float:left;
}

.plus{
  text-align:center;
  font-size:30px;
  color:white;
}
<div class="wrapper">
  <div class="blue">
    <div class="blue-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
    <div class="blue-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
     <div class="blue-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
  </div>
  <div class="red">
    <div class="red-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
    <div class="red-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
     <div class="red-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
  </div>
    
  <div class="plus">+</div>
  
    <div class="orange">
    <div class="orange-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
    <div class="orange-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
     <div class="orange-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
  </div>
  <div class="black">
    <div class="black-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
    <div class="black-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
     <div class="black-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
  </div>
</div>
Ubed kazi
  • 1
0

Flex and grid, if you are okay to use them , can help you .

example with an extra tag for the + sign if it is one :

/* color for blocks */

.red {
  background: #f00;
}

.orange {
  background: #f80;
}

.yellow {
  background: #ff0;
}

.green {
  background: #0f0;
}

.cyan {
  background: #0ff;
}

.blue {
  background: #00f;
}

.purple {
  background: #f0f;
}

.block3_area>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: max-content;
  grid-row: 1;
}

.block3_area>div>div {
  width: 3em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px white;
}

.block3_area>div.middle {
  grid-row: 2;
  grid-column: 2;
  width: min-content;
  text-align: center;
  justify-content: center;
  color: white;
  font-size: 50px;
  line-height: 25px;
}

.block3_area>div.middle~div {
  grid-row: 3;
}

.block3_area> :nth-child(2),
.block3_area> :nth-child(5) {
  grid-column: 3;
}

.block3_area {
  background: rgb(0, 192, 255);
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
  margin: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  background: rgb(0, 128, 0);
}
<!-- game 3 -->
<div class="block3_area">
  <div class="block3_grid grid_tl">
    <!-- top left grid, top row -->
    <div id="block_3_1_1" class="game3block bl3top red">TL-1</div>
    <div id="block_3_1_1" class="game3block bl3top red">TL-2</div>
    <div id="block_3_1_1" class="game3block bl3top red">TL-3</div>

    <!-- top left grid, middle row -->
    <div id="block_3_1_1" class="game3block bl3mid red">TL-4</div>
    <div id="block_3_1_1" class="game3block bl3mid red">TL-5</div>
    <div id="block_3_1_1" class="game3block bl3mid red">TL-6</div>

    <!-- top left grid, bottom row -->
    <div id="block_3_1_1" class="game3block bl3bot red">TL-7</div>
    <div id="block_3_1_1" class="game3block bl3bot red">TL-8</div>
    <div id="block_3_1_1" class="game3block bl3bot red">TL-9</div>
  </div>

  <div class="block3_grid grid_tr">
    <!-- top right grid, top row -->
    <div id="block_3_2_1" class="game3block green">TR-1</div>
    <div id="block_3_2_1" class="game3block green">TR-2</div>
    <div id="block_3_2_1" class="game3block green">TR-3</div>

    <!-- top right grid, middle row -->
    <div id="block_3_2_1" class="game3block green">TR-4</div>
    <div id="block_3_2_1" class="game3block green">TR-5</div>
    <div id="block_3_2_1" class="game3block green">TR-6</div>

    <!-- top right grid, bottom row -->
    <div id="block_3_2_1" class="game3block green">TR-7</div>
    <div id="block_3_2_1" class="game3block green">TR-8</div>
    <div id="block_3_2_1" class="game3block green">TR-9</div>
  </div>
  <div class="middle">+</div>
  <div class="block3_grid grid_bl">
    <!-- bottom left grid, top row -->
    <div id="block_3_3_1" class="game3block blue">BL-1</div>
    <div id="block_3_3_1" class="game3block blue">BL-2</div>
    <div id="block_3_3_1" class="game3block blue">BL-3</div>

    <!-- bottom left grid, middle row -->
    <div id="block_3_3_1" class="game3block blue">BL-4</div>
    <div id="block_3_3_1" class="game3block blue">BL-5</div>
    <div id="block_3_3_1" class="game3block blue">BL-6</div>

    <!-- bottom left grid, bottom row -->
    <div id="block_3_3_1" class="game3block blue">BL-7</div>
    <div id="block_3_3_1" class="game3block blue">BL-8</div>
    <div id="block_3_3_1" class="game3block blue">BL-9</div>
  </div>

  <div class="block3_grid grid_br">
    <!-- bottom left grid, top row -->
    <div id="block_3_4_1" class="game3block yellow">BR-1</div>
    <div id="block_3_4_1" class="game3block yellow">BR-2</div>
    <div id="block_3_4_1" class="game3block yellow">BR-3</div>

    <!-- bottom left grid, middle row -->
    <div id="block_3_4_1" class="game3block yellow">BR-4</div>
    <div id="block_3_4_1" class="game3block yellow">BR-5</div>
    <div id="block_3_4_1" class="game3block yellow">BR-6</div>

    <!-- bottom left grid, bottom row -->
    <div id="block_3_4_1" class="game3block yellow">BR-7</div>
    <div id="block_3_4_1" class="game3block yellow">BR-8</div>
    <div id="block_3_4_1" class="game3block yellow">BR-9</div>
  </div>
</div>

https://codepen.io/gc-nomade/pen/LYVOqKV

or the plus sign drawn in the background if its only about design :

/* color for blocks */

.red {
  background: #f00;
}

.orange {
  background: #f80;
}

.yellow {
  background: #ff0;
}

.green {
  background: #0f0;
}

.cyan {
  background: #0ff;
}

.blue {
  background: #00f;
}

.purple {
  background: #f0f;
}

.block3_area>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: max-content;
  grid-row: 1;
  grid-column: 1;
}

.block3_area>div>div {
  width: 3em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px white;
}

.block3_area> :nth-child(2n) {
  grid-column: 2;
}

.block3_area> :nth-child(2)~div {
  grid-row: 2;
}

.block3_area {
  background: linear-gradient(white, white) no-repeat center center, linear-gradient(white, white) no-repeat center center rgb(0, 192, 255);
  background-size: 2px 2em, 2em 2px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  margin: auto;
  grid-gap: 1.5em;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  background: rgb(0, 128, 0);
}
<!-- game 3 -->
<div class="block3_area">
  <div class="block3_grid grid_tl">
    <!-- top left grid, top row -->
    <div id="block_3_1_1" class="game3block bl3top red">TL-1</div>
    <div id="block_3_1_1" class="game3block bl3top red">TL-2</div>
    <div id="block_3_1_1" class="game3block bl3top red">TL-3</div>

    <!-- top left grid, middle row -->
    <div id="block_3_1_1" class="game3block bl3mid red">TL-4</div>
    <div id="block_3_1_1" class="game3block bl3mid red">TL-5</div>
    <div id="block_3_1_1" class="game3block bl3mid red">TL-6</div>

    <!-- top left grid, bottom row -->
    <div id="block_3_1_1" class="game3block bl3bot red">TL-7</div>
    <div id="block_3_1_1" class="game3block bl3bot red">TL-8</div>
    <div id="block_3_1_1" class="game3block bl3bot red">TL-9</div>
  </div>

  <div class="block3_grid grid_tr">
    <!-- top right grid, top row -->
    <div id="block_3_2_1" class="game3block green">TR-1</div>
    <div id="block_3_2_1" class="game3block green">TR-2</div>
    <div id="block_3_2_1" class="game3block green">TR-3</div>

    <!-- top right grid, middle row -->
    <div id="block_3_2_1" class="game3block green">TR-4</div>
    <div id="block_3_2_1" class="game3block green">TR-5</div>
    <div id="block_3_2_1" class="game3block green">TR-6</div>

    <!-- top right grid, bottom row -->
    <div id="block_3_2_1" class="game3block green">TR-7</div>
    <div id="block_3_2_1" class="game3block green">TR-8</div>
    <div id="block_3_2_1" class="game3block green">TR-9</div>
  </div>
  <div class="block3_grid grid_bl">
    <!-- bottom left grid, top row -->
    <div id="block_3_3_1" class="game3block blue">BL-1</div>
    <div id="block_3_3_1" class="game3block blue">BL-2</div>
    <div id="block_3_3_1" class="game3block blue">BL-3</div>

    <!-- bottom left grid, middle row -->
    <div id="block_3_3_1" class="game3block blue">BL-4</div>
    <div id="block_3_3_1" class="game3block blue">BL-5</div>
    <div id="block_3_3_1" class="game3block blue">BL-6</div>

    <!-- bottom left grid, bottom row -->
    <div id="block_3_3_1" class="game3block blue">BL-7</div>
    <div id="block_3_3_1" class="game3block blue">BL-8</div>
    <div id="block_3_3_1" class="game3block blue">BL-9</div>
  </div>

  <div class="block3_grid grid_br">
    <!-- bottom left grid, top row -->
    <div id="block_3_4_1" class="game3block yellow">BR-1</div>
    <div id="block_3_4_1" class="game3block yellow">BR-2</div>
    <div id="block_3_4_1" class="game3block yellow">BR-3</div>

    <!-- bottom left grid, middle row -->
    <div id="block_3_4_1" class="game3block yellow">BR-4</div>
    <div id="block_3_4_1" class="game3block yellow">BR-5</div>
    <div id="block_3_4_1" class="game3block yellow">BR-6</div>

    <!-- bottom left grid, bottom row -->
    <div id="block_3_4_1" class="game3block yellow">BR-7</div>
    <div id="block_3_4_1" class="game3block yellow">BR-8</div>
    <div id="block_3_4_1" class="game3block yellow">BR-9</div>
  </div>
</div>

https://codepen.io/gc-nomade/pen/dyoZaBG

if you are not familar with grid and flex , these links can be usefull to you :

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129