Dear Stackoverflow community,
I tried playing around with css-grids. I have made a simple grid that activates when the @media query is met. I made a small filter block that you see on most modern websites. The problem is that I'm unable to get the search input and buttons correctly into the grid. I tried using span by giving the input 1/3 of the space and the buttons 2/3 of the remaining space. But the buttons get stuck under the search input.
I attached a picture below of how it should look, code is also attached in a jsfiddle and at the bottom of the page.
css-grid image final result
Code: https://jsfiddle.net/0hjya9fm/8/
Anyone have some advice of how I can get my form with my input to take up column 1,2,3 and scale with the filter the buttons above, while the remaining form buttons take up column 4,5? It seems so simple but I can't get it.
* {
margin: 0px;
padding: 0px;
font-family: 'Roboto', sans-serif;
}
:root {
}
body {
background: #34353b;
}
nav {
background-color: lightgray;
grid-area: nav;
}
main {
background-color: #4f535b;
grid-area: main;
}
.filter {
background-color: green;
grid-area: filter;
}
footer {
background-color: yellow;
grid-area: footer;
}
nav a {
text-decoration: none;
color:#AAAAAA;
}
nav ul {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 3px;
padding-right: 3px;
}
input {
border: #8d8d8d solid 1px;
color: white;
background: #34353b;
height: 20px;
}
button {
color: white;
min-height: 26px;
line-height: 20px;
padding: 1px 5px 2px;
margin: 0 2px;
border: 2px solid #8d8d8d;
border-radius: 3px;
background: #34353b;
width: 100px;
}
.filters {
display: grid;
background: yellow;
align-items: center;
justify-items: center;
width: 100px;
height: 30px;
border-radius: 0.1875rem;
color: #f1f1f1;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
text-shadow: 2px 2px 3px rgba(0,0,0,.3);
font-weight: bold;
cursor: pointer;
background: #9E2720;
border-color: #9E2720;
}
@media (max-width: 786px)
{
body {
font-size:14px;
}
.primairy-grid-container {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: 0.1fr 0.2fr auto 0.2fr;
grid-template-areas: "nav nav"
"filter filter"
"main main"
"footer footer";
grid-gap: 0.4rem;
}
nav ul {
display: grid;
list-style-type: none;
grid-template-columns: repeat(8, 1fr);
text-align: center;
}
.filter {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(4, 1fr);
border: solid 2px #ffff;
margin-left: 20px;
margin-right: 20px;
align-items: center;
justify-items: center;
}
.filter input {
grid-column-start:1;
grid-column-end:4;
align-items: start;
justify-items: stretch;
}
form {
display: grid;
grid-template-columns: 1fr auto;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div class="primairy-grid-container">
<nav>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li><a href="#">Menu item 6</a></li>
<li><a href="#">Menu item 7</a></li>
<li><a href="#">Menu item 8</a></li>
</ul>
</nav>
<div class="filter">
<div class="filters">Filter 1</div>
<div class="filters">Filter 2</div>
<div class="filters">Filter 3</div>
<div class="filters">Filter 4</div>
<div class="filters">Filter 5</div>
<div class="filters">Filter 6</div>
<div class="filters">Filter 7</div>
<div class="filters">Filter 8</div>
<div class="filters">Filter 9</div>
<div class="filters">Filter 10</div>
<form>
<input type="search" id="gsearch" name="gsearch">
<button type="button">Search</button>
<button type="button">Reset Filter</button>
</form>
<div id="advanced">Show advanced filter options</div>
<div id="randomize">Randomize filter options</div>
</div>
<main>main</main>
<footer>footer</footer>
</div>
</body>
</html>
question from:
https://stackoverflow.com/questions/65882447/how-to-style-a-form-input-with-css-grid-to-span-over-entire-length-of-starting-i 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
