CSS GRID (Adding box)

suzzil60 · September 3, 2018

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;

Funce · September 3, 2018

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.

Sign In

CSS GRID (Adding box)

Recommended Posts

suzzil60

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity