Creating a grid pattern of boxes within a rectangle using CSS

Question

Creating a grid pattern of boxes within a rectangle using CSS

I'm attempting to design a rectangle filled with colorful boxes

Here is the code I'm using:

<div class="col-md-3" >
  <div id="myViewport" style="height: 700px; width: 50px; padding: 10px; border: 5px solid gray; margin: 0;">
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass0'/>
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass1'/>
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass2'/>           
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass3'/>
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass4'/>
    <div style="height:10px;background-color:#FFA500;" id='pass5'/>
    <div style="height:10px;background-color:#FFA500;" id='pass6'/>
  </div>
</div>

I'm aiming for a design similar to this:

https://i.sstatic.net/vKe5U.png

However, I can't seem to get the boxes to appear. Can anyone point out what I might be doing incorrectly?

html css

Answer 1

Answer №1

Always remember to properly close your div tags with </div> instead of just />.

If you want each box to fill the entire div, assign a height in percentage to each child div. For example, in this scenario, it would be 14.28%(Number of elements / 100).

<div id="myViewport" style="height: 700px; width: 50px; padding: 10px; border: 5px solid gray; margin: 0;">
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass0'></div>
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass1'></div>
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass2'></div>           
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass3'></div>
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass4'></div>
  <div style="height:14.28%; background-color:#FFA500;" id='pass5'></div>
  <div style="height:14.28%; background-color:#FFA500;" id='pass6'></div>
</div>

Answer 2

Always remember to properly close your div tags with </div> instead of just />.

If you want each box to fill the entire div, assign a height in percentage to each child div. For example, in this scenario, it would be 14.28%(Number of elements / 100).

<div id="myViewport" style="height: 700px; width: 50px; padding: 10px; border: 5px solid gray; margin: 0;">
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass0'></div>
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass1'></div>
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass2'></div>           
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass3'></div>
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass4'></div>
  <div style="height:14.28%; background-color:#FFA500;" id='pass5'></div>
  <div style="height:14.28%; background-color:#FFA500;" id='pass6'></div>
</div>

Answer 3

Answer №2

Update the color attribute to represent background-color instead. The "color" property should be used for font color specifically.

Answer 4

Update the color attribute to represent background-color instead. The "color" property should be used for font color specifically.

Answer 5

Answer №3

Remember, div tags are not self-closing. Instead of using />, you should close a div with </div>. Following this proper structure will ensure everything works as intended.

#myViewport { 
      height: 700px; 
      width: 50px; 
      padding: 10px; 
      border: 5px solid #aaa; 
      margin: 0;}

/* To calculate the height, divide the available space by the number of elements - creating boxes that fill the space available after accounting for padding. */

#myViewport div { margin: 1px; height: calc((100% - 10px) / 7); }

#pass0, #pass1, #pass2, #pass3, #pass4 { background: #000;}

#pass5, #pass6 { background: #ffa500; }

<div class="col-md-3" >
  <div id="myViewport">
    <div id='pass0'></div>
    <div id='pass1'></div>
    <div id='pass2'></div>          
    <div id='pass3'></div>
    <div id='pass4'></div>
    <div id='pass5'></div>
    <div id='pass6'></div>
  </div>
</div>

Answer 6

Remember, div tags are not self-closing. Instead of using />, you should close a div with </div>. Following this proper structure will ensure everything works as intended.

#myViewport { 
      height: 700px; 
      width: 50px; 
      padding: 10px; 
      border: 5px solid #aaa; 
      margin: 0;}

/* To calculate the height, divide the available space by the number of elements - creating boxes that fill the space available after accounting for padding. */

#myViewport div { margin: 1px; height: calc((100% - 10px) / 7); }

#pass0, #pass1, #pass2, #pass3, #pass4 { background: #000;}

#pass5, #pass6 { background: #ffa500; }

<div class="col-md-3" >
  <div id="myViewport">
    <div id='pass0'></div>
    <div id='pass1'></div>
    <div id='pass2'></div>          
    <div id='pass3'></div>
    <div id='pass4'></div>
    <div id='pass5'></div>
    <div id='pass6'></div>
  </div>
</div>

Creating a grid pattern of boxes within a rectangle using CSS

Answer №1

Answer №2

Answer №3

Similar questions

How can I replicate the Firefox style in IE8 using Bootstrap and CSS?

error in css styling detected

Display and conceal information upon tweeting

Utilize a while loop in JavaScript to trigger a message when a variable dips below zero

What are the methods for adjusting the height of one div in relation to another div?

Attempting to implement a functionality that will allow users to easily delete records from the database

Using JavaScript to empty input field when switching focus between input fields

Run a function continuously while a key is being held down

Retrieve the updated text content from a textarea using JavaScript/jQuery

Obtaining the URL from the anchor tag

Embed a photo into a pop-up window

Enhancing Your WordPress Menu with Customized Spans

Title vanishes when gradient is added to a div

Float a div within text to be positioned vertically

Stop the stream coming from getUserMedia

Executing functionality based on changes in Angular bindings

What steps should I take to correct the alignment of this grid using CSS?

Modify the bootstrap dropdown background to display only an image

Getting the result from HTML5 FileReader: How does it work?

Navbar links in Bootstrap unexpectedly expanding in width