I am trying to use css grids but the elements aren't positioned in the way that I thought they did. Here is the code of the css:
.container
{
display: grid;
grid-template-columns: 10px 10px 10px 10px 10px 60px 60px 60px 60px 60px;
grid-template-rows: 10px 10px 5px 5px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 120px;
grid-template-areas:
"logos keno keno keno search keno keno login signup language"
". menu menu menu menu menu menu menu menu ."
". . . sitemap sitemap sitemap sitemap . . ."
". . . main main main main . . ."
". side . main main main main . . ."
". side . main main main main . . ."
". side . main main main main . . ."
". side . main main main main . . ."
". side . main main main main . . ."
". side . main main main main . . ."
". side . main main main main . . ."
". . . main main main main . . ."
"keno footer footer footer footer footer footer footer footer keno";
grid-gap: 5px;
}
.kena
{
grid-area:keno;
background: DodgerBlue;
}
.logo
{
grid-area:logos;
background: DodgerBlue;
}
and the php:
<html lang="el">
<head>
<meta charset="utf-8">
<title>
SITE
</title>
<link rel="stylesheet" type="text/css" href="grids.css">
</head>
<body>
<?php
session_start();
?>
<div class="container">
<a href="index.php" class="logo"><img src="logo1.png"></a>
<div class="searcher">
<form action="search.php">
<input type="text" placeholder="Search..." name="search"/>
<button type="submit"></button>
</form>
</div>
</div>
</body>
</html>
With that code I expected that the logo would be up left but instead it's in the middle row and far right. I don't understand why. I already used a similar code with less areas for another php and worked just fine so it's not about the browser or the head of the php. What am I missing here?
