Aligning Boxes Problem

[ttibsen]

How do I get the Green box directly under the Red box?

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Playing With the Float Property</title>
  <style>
    body  {
      display: flex;
      flex-direction: row;
    }
    .blue {
      width: 150px;
      height: 300px;
      padding: 10px;
      border: 3px solid blue;
      box-sizing: border-box;
      
    }

    .red {
      width: 150px;
      height: 150px;
      padding: 20px;
      border: 3px solid rgb(255, 0, 0);
      box-sizing: border-box;
    }

    .green {
      width: 150px;
      height: 150px;
      padding: 30px;
      border: 3px solid rgb(0, 255, 55);
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="blue">Blue</div>
  <div class="red">Red</div>
  <div class="green">Green</div>
</body>

</html>

[coolbluedesigns]

First, try changing the display in body to grid. Then try adding grid-template-rows and grid-template-columns to the body as well. There you can give the width and height that you would like each row and column to have; example grid-template-columns: 150px 150px or grid-template-rows: 150px 150px. Then take off the width and height for each of the colored boxes (as that is now already taken care of). Then you can add grid-row-start, grid-row-end, grid-column-start, and grid-column-end to each of the colored boxes indicating where you would like them placed on the grid. For example, you would want the blue box to have grid-column-start: 1, grid-row-start: 1, and grid-row-end: 3 so that it starts at the first column as well as the first row but goes down 2 rows to end at the start of the third. Hope this helps. My sample code is below.

body  {
      display: grid;
      flex-direction: row;
      grid-template-columns: 150px 150px;
      grid-template-rows: 150px 150px;
  grid-row-gap:1px;
  grid-column-gap:1px;
    }
    .blue {
      
      padding: 10px;
      border: 3px solid blue;
      box-sizing: border-box;
      grid-column-start: 1;  
      grid-row-start: 1;
      grid-row-end: 3;
    }

    .red {
      
      padding: 20px;
      border: 3px solid rgb(255, 0, 0);
      box-sizing: border-box;
      grid-row-start: 1;
      grid-column-start: 2;
    }

    .green {
      padding: 30px;
      border: 3px solid rgb(0, 255, 55);
      box-sizing: border-box;
      grid-row-start: 2;
        grid-column-start: 2;
    }

[ttibsen]

body {
►display: grid;
flex-direction: row;
►grid-template-columns: 150px 150px;
►grid-template-rows: 150px 150px;
►grid-row-gap:1px;
►grid-column-gap:1px;
}
.blue {

  padding: 10px;
  border: 3px solid blue;
  ►box-sizing: border-box;
  ►grid-column-start: 1;  
  ►grid-row-start: 1;
  ►grid-row-end: 3;
}

.red {
  
  padding: 20px;
  border: 3px solid rgb(255, 0, 0);
  ►box-sizing: border-box;
  ►grid-row-start: 1;
  ►grid-column-start: 2;
}

.green {
  padding: 30px;
  border: 3px solid rgb(0, 255, 55);
  ►box-sizing: border-box;
  ►grid-row-start: 2;
  ►grid-column-start: 2;
}

► - indicates properties I haven’t seen previously

Thank you so much for taking the time to write out all those lines of code as well as providing me with such a detailed account of the rationale behind the coding. Your answer will have me going back to the books so to speak since I am not familiar with any of the properties that I have indicated with the triangles. I have completed the -
Basic HTML and HTML5
Basic CSS
Applied Visual Design
courses offered through freeCodeCamp and nowhere in those 3 blocks of lessons, have I come across the properties that I’ve designated with the triangles. I guess the reason for that must be that my courses thus far have been basic and your coding must consist of more advanced properties. I had been wondering about how I was going to layout a nice format for a web page with the items I learned in the courses. It just seemed to be an impossible task with what I knew thus far. I’m excited with the codes that you have provided me with. This seems to be the key to getting the page layout that I need for a nice looking web page. Now I am off to study!

[lasjorg]

If you have three flex items and you want two of them to stack one option is simply to group the two items inside their own container.

Example:

<div class="blue">Blue</div>
<div class="group">
  <div class="red">Red</div>
  <div class="green">Green</div>
</div>

Without knowing exactly what layout you are trying to create it’s a little hard to give a good answer.

---

The curriculum has sections on both Flexbox and CSS Grid. But you really do not need CSS Grid for this layout.

CSS Grid Layout - CSS: Cascading Style Sheets | MDN

A Complete Guide to Grid | CSS-Tricks

[coolbluedesigns]

Glad that I could help.

[ttibsen]

@lasjorg

Without knowing exactly what layout you are trying to create it’s a little hard to give a good answer.

I am trying to move the green box under the red box - here is the original positioning -

I have - I think, implemented your suggestion in my enclosed code and it works very nicely, showing that there is more than one way to skin a cat. And thanks for the links!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   body {
       display: flex;
       justify-content: flex-start;

   }
    .group  {
        width: 151px;
        height: 302px;
        border: 2px solid black;
    }
        .blue {
      width: 150px;
      height: 300px;
      padding: 10px;
      border: 3px solid blue;
      box-sizing: border-box;
      
    }

    .red {
      width: 150px;
      height: 150px;
      padding: 20px;
      border: 3px solid rgb(255, 0, 0);
      box-sizing: border-box;
    }

    .green {
      width: 150px;
      height: 150px;
      padding: 30px;
      border: 3px solid rgb(0, 255, 55);
      box-sizing: border-box;
    }
</style>
<body>
    <div class="blue">Blue</div>
<div class="group">
  <div class="red">Red</div>
  <div class="green">Green</div>
</div>
</body>
</html>

[ttibsen]

@lasjorg

The curriculum has sections on both Flexbox and CSS Grid. But you really do not need CSS Grid for this layout.

What about something a bit more complex like this one?

Would you use CSS Grid or can this still be done with containers and flex display?

[lasjorg]

I’m sure there is more than one way to do it, but it does look like a pretty good candidate for a grid layout.

[ttibsen]

After taking a few of the grid modules in the curriculum, I have attempted to implement the grid outline that I have posted previously with this code but as you can see - the result, while sort of OK in that it follows the general outline of the grid - it lacks the precision that I was looking for. For example - the container (body) was set to
height 700
the following elements had heights of
red 200
yellow 300
green 200
total 700
so they should have fit perfectly within the height of the container. But no - it’s messy with gaps where there shouldn’t be any. Similarly the blue extends beyond the container’s bottom while the orange block extends beyond the RS of the container. Any ideas as to why I’m not getting the precision fit that I was after?

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A Layout of 5 Boxes</title>
    <style>
        .red {
            width: 400px;
            height: 200px;
            background-color: red;
            grid-column: 1 / 3;
        }

        .orange {
            width: 200px;
            height: 700px;
            background-color: orange;
        }

        .yellow {
            width: 200px;
            height: 300px;
            background-color: yellow;
            grid-row: 2 / 3;
        }

        .green {
            width: 200px;
            height: 200px;
            background-color: green;
            color: white;
            grid-row: 3 / 4;
            ;
        }

        .blue {
            width: 200px;
            height: 500px;
            background-color: blue;
            color: white;
        }

        body {
            width: 600px;
            height: 700px;
            border: solid 4px black;
            box-sizing: border-box;
            display: grid;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 233px 233px 233px;
        }
    </style>

</head>

<body>
    <div class="red">A box is red</div>
    <div class="orange">B box is orange</div>
    <div class="yellow">C box is yellow</div>
    <div class="green">D box is green</div>
    <div class="blue">E box is blue</div>
</body>
</html>

[jsdisco]

You’d need grid-template-rows: 200px 300px 200px; for that layout.

[lasjorg]

If you set dimensions on the grid container you either have to add the border to the height and width, or you need to remove the box-sizing. But I would suggest you size the container using the rows and columns.

1. You need a row that is 300px so you can’t just divide 700 by 3.

2. Use the rows and columns for sizing the grid cells, you do not need to set the size of the elements.

3. I would suggest when practicing line placement to be explicit about the placement, even if/when not needed (define all start/end). I would also strongly suggest using the grid inspector in Chrome or Firefox. The one in Firefox is still better, but the one in Chrome does the job.

Example code if needed (try on your own first):
https://codepen.io/lasjorg/pen/eYdxLqJ

[ttibsen]

@lasjorg

Use the rows and columns for sizing the grid cells, you do not need to set the size of the elements.

Right - I think that I was making the situation more complex than it had to be by setting width and height of the elements. Much easier to do it as you have suggested - size the grid cells and then place the elements in the grid where you want them with the grid-row / grid-column properties.
Thanks for the insights!