How to apply grid to the individual sidebar listing in Mapbox map? - mapbox

Question

I'm using this example from mapbox.
I want to create something similar to the sidebar listings that can be seen on Airbnb and Zillow
:example
I was able to apply columns to the sidebar itself, but not a grid to the individual listings.
See in here:N
before
after
I tried changes in html, css, js as well. No success. Does anybody know how to do it?
<div id="map"></div>
<div class="map-overlay">
<div class="listing-box">
<div id="feature-listing" class="listing"></div>
</div>
</div>
#map {
position: absolute;
left: 50%;
width: 50%;
top: 0;
bottom: 0;
}
.map-overlay {
position: absolute;
width: 50%;
top: 0;
bottom: 0;
left: 0;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #fff;
max-height: 100%;
overflow: auto;
}
.map-overlay input {
display: block;
border: none;
width: 100%;
border-radius: 3px;
padding: 10px;
margin: 0px;
box-sizing: border-box;
}
.map-overlay .listing-box {
display: block;
margin: 10px;
}
.map-overlay .listing {
postiton: absolute;
display: inline-block;
width: 100%;
padding-bottom: 0px;
-webkit-column-count: 2; /* Chrome/Opera, Safari */
-moz-column-count: 2; /* Mozilla Firefox */
column-count: 2;
-webkit-column-gap: 10px; /* Chrome/Opera, Safari */
-moz-column-gap: 10px; /* Mozilla Firefox */
column-gap: 10px;
-webkit-column-rule: 1px single grey; /* Chrome/Opera, Safari */
-moz-column-rule: 1px single grey; /* Mozilla Firefox */
column-rule: 1px single grey;
}
.map-overlay .listing > * {
display: block;
height: 150px;
padding: 5px 10px;
margin-bottom: 10px;
}
.map-overlay .listing a {
display: block;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: #404;
text-decoration: none;
background: red;
}
.map-overlay .listing a:last-child {
border: none;
}
.map-overlay .listing a:hover {
background: #f0f0f0;
}
listingEl.innerHTML = "";
if (features.length) {
features.forEach(function(feature) {
var prop = feature.properties;
var item = document.createElement("a");
item.href = prop.wikipedia;
item.target = "_blank";
item.textContent = prop.name + " (" + prop.abbrev + ")";
item.addEventListener("mouseover", function() {
The whole project can be found here.

Answer 1

It seems like your problem is CSS only and you need to remove certain style's to get the view of the listing given on https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/
Remove .map-overlay .listing { CSS as it divide your grid with column-count: 2;
.map-overlay .listing a {
display: block;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: #404;
text-decoration: none;
/* background: red; */ //<---remove
}
.map-overlay .listing > * {
display: block;
/* height: 150px; */ //<---remove
padding: 5px 10px;
/* margin-bottom: 10px; */ //<---remove
}
Screenshot:
Good Luck!