CODEWITHSUNDEEP
htmlcss
Zain Farooq
Zain Farooq

Reputation: 2964

How to make grid style of specific width?

I have problem in making grid styling of specific width. I want to set the size of width as half the width of body. I have tried it but it consumes almost the full width of page. I want to decrease its width. Can anyone please tell me that how to decrease the width of grid
Here is the code which I have tried.

enter code here
<!DOCTYPE html>
<html lang="en">
<head>
<style>



    .floating-box {
        display:inline-block;
        width: 50px;
        height: 75px;
        margin: 10px;
        border: 3px solid #8AC007;
    }
</style>


</head>
<body>
<div class="floating-box">Grid Box</div>
<div class="floating-box">Grid Box</div>
<div class="floating-box">Grid Box</div>
<div class="floating-box">Grid Box</div>
<div class="floating-box">Grid box</div>
<div class="floating-box">Grid box</div>
<div class="floating-box">Grid box</div>
<div class="floating-box">Grid box</div>

</body>
</html>

https://jsfiddle.net/4gzkx53q/1/

Upvotes: 1

Views: 54

Answers (1)

Emad Khalil
Emad Khalil

Reputation: 823

ok check this one, I think its cleaner code, envelop the div cells into main div grid and give it the width, also you can remove the classes in each div and use the parent class to apply the style to all its child divs 

.grid div

as in the example:

https://jsfiddle.net/4gzkx53q/5/

Upvotes: 1

Related Questions