How would I turn this into a grid?

HTML & CSS
1 
body {
  margin: 0 auto;
  border: 1px solid #f00;
}

.theBox {
  background-color: plum;
  border: 1px solid #0f0;
  height: 100px;
  margin: 20px;
  padding: 20px;
  width: 400px;
}

.theOtherBox {
  background-color: peachpuff;
  border: 1px solid #0f0;
  height: 100px;
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  width: 400px;
  }

------------------------------------------------------

<div class="theBox"></div>
<div class="theOtherBox"></div>

<div class="theOtherBox"></div>

<div class="theOtherBox"></div>

<div class="theOtherBox"></div>

<div class="theOtherBox"></div>

<div class="theOtherBox"></div>

<div class="theOtherBox"></div>

<div class="theOtherBox"></div>

<div class="theOtherBox"></div>
2

You should know by now that how you approach one step in a design depends very much on what else is going on, so before we start, please explain exactly what you want.

Do you want a fixed number of boxes per row? Will the boxes all be the same size? What kind of content will they have?

If this is just a learning exercise, then I suggest that you reread this thread: Does and should [display values] be put on every style tag? and simply try out the different techniques to see how they work. (Save a backup copy of your original code first, so you can always return to it.)

3

Yes, a fixed number.
123
456
789

4

I don’t understand how I would move the boxes so they are lined up.

5

You already have a number of threads covering multiple ways to achieve a grid layout. The thread I linked to above provided a good deal of information on basic behaviour.

For this topic to go anywhere productive (rather than simply cover the same ground already covered) you really need to state clearly what you want the finished result to be. The more information you can give, the more useful our responses are likely to be. Post a sketch or mock-up, if that helps to explain.

1 Like
6

You could use the display table properties to make a grid that mimcs a table layout.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
.theBox {
	background: plum;
	border: 1px solid #0f0;
	height: 100px;
	padding: 20px;
}
.theBox:nth-child(odd) {background: peachpuff;}
.trow:nth-child(odd) .theBox{background: peachpuff;}
.trow:nth-child(odd) .theBox:nth-child(odd) {background: plum;}

.wrap {
	display:table;
table-layout:fixed;
	border-spacing:20px;
	width:100%;
	max-width:1200px;
	margin:auto;
	border: 1px solid #f00;
}
.trow {
	display:table-row;
}
.theBox {
	display:table-cell;
	vertical-align:top;
}
</style>
</head>

<body>
<div class="wrap">
  <div class="trow">
    <div class="theBox">1</div>
    <div class="theBox">2</div>
    <div class="theBox">3</div>
  </div>
  <div class="trow">
    <div class="theBox">4</div>
    <div class="theBox">5</div>
    <div class="theBox">6</div>
  </div>
  <div class="trow">
    <div class="theBox">7</div>
    <div class="theBox">8</div>
    <div class="theBox">9</div>
  </div>
</div>
</body>
</html>
3 Likes
7

How do I put: 789 in a row cause I changed the height of the bottom row?

I just did it, is there any way to change the height of the bottom row without making a new one of these?

.theBox2 {
    background: plum;
    border: 1px solid #0f0;
    width: 400px;
    height: 54px;
    padding: 0px;
}
8

There’s another piece you missed as you changed the class name

.theBox {
	display:table-cell;
	vertical-align:top;
}

You need a version of this for the new class too. Or just amend that one to read

.theBox, .theBox2 {
	display:table-cell;
	vertical-align:top;
}
1 Like
9

I just did that:

10

Cool!
http://testgrid5432.blogspot.com/

11

What did I do wrong here?

12

Thought you’d already got it right a couple of posts ago?

13

Ron told you this before and divs are not self closing. :wink:

You need to change this:

<div class='tuner'/>

to this:

<div class='tuner'></div>
1 Like
14

I fixed it: https://jsfiddle.net/ts7mz136/4/

Can you please show me how I can change the background color cause it’s not changing, or, it won’t change?

15

The background color won’t change
http://testgrid5432.blogspot.com/

16

Shouldn’t it be black if I have it set to black?

html, body {
margin:0;
padding:0
background: #000000;
}
17 
background-color: black;
18

Can you show me cause it’s not changing?

I made the height smaller so you can see the bottom.

The outer perimeter isn’t changing to black

19

I’m not sure what isn’t working, as I can see it with a black background just fine.

Just for reference btw, you can do that in any one of these three ways - the effect is just the same

background-color: black;
background-color: #000;
background-color: #000000;
1 Like
20

Under it, around it, that color isn’t changing to black?

693×299 2.01 KB