Jump to content
suzzil60

CSS GRID (Adding box)

Recommended Posts

This is the box model I have created from css grid.I am  stuck.I wanna add more box on the bottom of the side bar.Is it possible to do so? Here is my code.

 

 

                                                                                                     HTML

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML - BASICS</title>
    <link rel="stylesheet" type="text/css" href="css/html.css">
</head>
<body>

<div class="wrapper"> 
        <div class="box-1">
           <ul>
           <li class="current"><a href="#">HTML</a></li>
           <li><a href="#">CSS</a></li>
           <li><a href="#">CSS GRID</a></li>
           <li><a href="#">BOOTSTRAP</a></li>
           <li><a href="#">JAVASCRIPT</a></li>
           <li><a href="#">JQUERY</a></li>
           <li><a href="#">NODE.JS</a></li>
           <li><a href="#">PYTHON</a></li>
           <li><a href="#">PHP</a></li>
           <li><a href="#">MYSQL</a></li>
           </ul>
         
     </div>

    <div class="box-2">
    <div class="main-content">
        <h1>HTML 5 Tutorial</h1>
        <h2> New element in HTML 5</h2>
        <ul>
        <li><span>Header</span> ---It contains title of the main content.It displays top screen in the browser.</li>
        <li><span>Nav </span>--- This element contains menu and catergories section.It may displayed in top, middle or side on the screen of the screen.It my be vertical or horizontal.</li>
        <li><span>Aside</span> --- This is the new element of the HTML 5 which stays  on the side of the website.</li>
        <li><span>Section</span> --- This is the main area of the website.It is located in the middle of  the website.</li>
        <li><span>Footer</span> --- This element defines the footer in the websites.</li>
        <li><span> Details</span> --- Defines additional details that users can see or hide</li>
        <li><span>Dialog</span>  --- Defines the dialog box or window.</li>
        <li><span>figcaption </span>--- Defines a caption for a 'figure' element.</li>
        <li><span>Figure</span></span> --- Defines a self-contained content.</li>
        <li><span>Main</span> --- Define the main content of a element.</li>
        <li><span>Mark</span> --- Define mark or highlighted text in the content.</li>
        <li><span>Progress</span> --- Represent progress of the a task.</li>
        <li><span>Summary</span>  --- Defines a visible heading for 'detils' element.</li>
        <li><span>Time </span>--- Defines date or time.</li>
        <li><span>bdi</span> --- Isolate a part of text that might be formatted in a different direction from other text outside it.</li>
        <i><span>Meter</span> --- Defines a scalar measurement within a known range (a gauge).</li>
        <li><span>rp</span>  ---     Defines what to show in browsers that do not support ruby annotations).</li>
        <li><span>rt </span>--- Defines an explanation/pronunciation of characters (for East Asian typography).</li>
        <li><span>Ruby </span>--- Defines a ruby annotation (for East Asian typography).</li>
        
        </ul>
        </div>
   </div>

    <div class="box-3">
        <h1>Display your Ad here</h1>
        
    </div>
    

   


</div>

    
</body>
</html>

 

 

 

 

                                                                                  CSS

 

 

*{
    margin: 0px;
    padding: 0px;
}


.wrapper{
    display: grid;
    grid-template-columns: 0.5fr 2fr 1fr;
    grid-gap: 0.5em;
    
    }

.box-1{
    border: 2px solid black;    
    margin: 0px 0px 0px 10px;
    line-height: 5em;
    background: #dcdcdc;
    height: 800px;
    
    
    
}

  .box-1 li{
      list-style-type: none;
      font-size: 25px;
      font-weight: bold;
      text-align: center;
      
 }
 
 .box-1 a{
    margin-right: 20px;
    margin-left: 20px;
     text-decoration: none;
     color: #000;
     padding: 15px 20px 10px 20px ;
 }
  
 .current{
     background: blue;
     color: #fff;
     margin-right: 0px;
     padding: 0px;
     text-align: center;
     
 }
     
 .current a {
     color: white;
     padding-left: 0px;
 }
 
 
 .box-1 a:hover{
     background : blue;
     color: #fff;
     transition-duration: 0.7s;
 }
  

.box-2{
    border: 2px solid blue;
    margin: 0px 0px 0px 0px;
}
.main-content ul{
    margin: 20px 0px 0px 0px;
    padding: 20px;
    font-size: 22px;
    list-style-type: none;
    font-weight: bold;
    line-height: 1.9em;
    color: #7B7C7C;
}

.main-content  h1{
    text-align: center;
}

.main-content h2{
    padding-left: 20px;
    margin-top: 30px;
}
    

.main-content{
    margin-top: 20px;
    
}

.main-content span {
    color: green;
    font-size: 25px;
}

.box-3{
    border: 2px solid red;
    background: #dcdcdc;
}

.box-3 h1{
     text-align: center;
     margin-top: 200px;
     height: 1200px;
    

Screenshot (113).png

Share this post


Link to post
Share on other sites

May I recommend using the code block ability of the Forums.

image.png.6c028de7ed9e881c065d45151b47f6c7.png

It'll be able to colour and structure your code to be a whole lot more readable.

--

If you want to add 'More box' in regards to filling the rest of the page, you'll need to change the styling for it to do so. Try experimenting with height. You might be able to get somewhere with that.

 

If you want to add ANOTHER box underneath that navigation box, put the HTML code for another box in underneath the nav box, then surround both boxes in a <div> tag. I've copied the navigation box again for this example.

image.thumb.png.9b2378ac4ff0b13d78d613d2574612a8.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×