My grid results are not rendering as desired, appearing horizontally instead of in two columns. Attached is my current CSS and a screenshot of the issue for reference. Any suggestions on how I can achieve the layout shown in the screenshot below?
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid-item {
padding: 16px;
border-bottom: 1px solid black;
}
.grid-item:nth-child(odd) {
border-right: 1px solid black;
}
.grid-item:nth-last-child(-n + 2):nth-of-type(odd),
.grid-item:last-child {
border-bottom: none;
}<form method="POST" id="Submit">
<div class="inner-form">
<div class="input-field first-wrap">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 "></path>
</svg>
</div>
<input id="search" type="url" name="url" placeholder="Paste here" required/>
</div>
<div class="input-field second-wrap">
<button id="button" class="btn-search" onclick="searchIt()" value="press" type="submit">SEARCH </button>
<!-- <button type="submit" class="btn-search">SEARCH</button> -->
</div>
</div>
<p id="errorMessage">Yikes!</p>
</form>EJS Template
<div class="grid">
<div class="grid grid-item">
<div class=“Countries>
<img alt="" src= "<%= country.icon %>" /> <%= country.name %>
</div>
<div class ="Category">
<% country.categories.forEach(function(cat){ %>
<%= cat.name %>
<% }); %>
</div>
</div>