CSS Grid System not working as thought

Question

/* Responsive Styling */

* {
    box-sizing: border-box;
}
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* Body CSS */
/* Header */

#header {
	height: 70px;
	background-color:white;
	border-top: solid 5px #324f8e;
	border-bottom: solid 2px #d5dae7;
	}
	
.logo {
	background-image: url('images/logo.png');
	background-repeat: no-repeat;
	margin: 15px;
	float: left;
	width: 100%;
	height: auto;
	}
	
.search {
	backr

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Project</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

<div id="header">
<div class="col-5 logo"></div>
<input type="search" class="col-2 search" placeholder="Search..." /></div>
<div class="ool-2 account"></div>
<div class="ool-1 notification"></div>
<div class="ool-2 logout"></div>
</div>



</body>

</html>

I can't seem to make the search be in the header container after the logo. I want it all to be in line for the header bar. I'm trying to use the Grid system, it's something small I suppose, but as a newbie, it's not clicking to me.

Also having issues with the logo, it seems to cut off slightly on the bottom, tried to a few different things with height, no luck on that either.

Thanks in advance.

Yeaaa, just so you know, this isn't the css grid system. But also, please put your work in a fiddle ( or something similar ) so others can easily poke around. — Pytth
– Pytth, Commented Sep 27, 2017 at 21:56
Any recommendations for the right grid system? Picked this off W3schools I think. — OneUnited
– OneUnited, Commented Sep 27, 2017 at 22:00

Fernando Hernandez · Accepted Answer · 2017-09-27 22:01:08Z

1

Add this code to your header:

display: grid;
grid-template-columns: repeat(x, 1fr);

Change the x by the number of elements you want in a single line.

This article could be helpful: CSS Grid Guide

answered Sep 27, 2017 at 22:01

Fernando Hernandez

1096 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Grid System not working as thought

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related