Так что у меня есть обычная сетка, и все работает правильно. Но тогда я вывести некоторые из HTML через это:

const outputHtml = matches ={amp}gt; { if (matches.length {amp}gt; 0) { const html = matches .map( match ={amp}gt; ` {amp}lt;div class="rec"{amp}gt; {amp}lt;a href="#"{amp}gt; {amp}lt;div class="boxtop"{amp}gt;{amp}lt;img src="${match.picture}" alt="1" /{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="boxbot"{amp}gt;{amp}lt;p{amp}gt;${match.title}{amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt;`).join(""); matchList.innerHTML = html; }}; 

Все появляется в одном столбце, и я не могу установить высоту .rec. CSS:

 .receptai { display: grid; grid-template-columns: 25% 25% 25% 25%; padding: 10px; } .match-list {amp}gt; .rec { max-height: 200px; } .boxtop { position: relative; height: 80%; width: 100%; } .boxtop img { width: 100%; height: auto; display: block; background-size: cover; background-repeat: no-repeat; background-position: center; } .boxbot { position: relative; height: 20%; background: var(--c2); color: var(--c1); } 

Html:

 {amp}lt;div class="receptai"{amp}gt; {amp}lt;div id="match-list"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Я предполагаю, что вы пытаетесь добавить свой внутренний div с классом ‘rec’ в div ‘match-list’, а не в div ‘receptai’. Таким образом, он не отображается как сетка, так как «список совпадений» является просто элементом сетки «получение». Вы должны установить innerHTML непосредственно в div ‘receptai’ или стилизовать ‘match-list’ как саму сетку, как показано в следующем фрагменте:

 matches = [ { title : "Merry", src : "https://cdn.pixabay.com/photo/2019/12/15/13/58/christmas-4697165_960_720.jpg" }, { title : "Christmas", src : "https://cdn.pixabay.com/photo/2019/12/15/13/58/christmas-4697165_960_720.jpg" } ] const html = matches .map( match ={amp}gt; ` {amp}lt;div class="rec"{amp}gt; {amp}lt;a href="#"{amp}gt; {amp}lt;div class="boxtop"{amp}gt;{amp}lt;img src="${match.src}" alt="1" /{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="boxbot"{amp}gt;{amp}lt;p{amp}gt;"${match.title}"{amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt;`).join(""); let matchList = document.getElementById('match-list'); matchList.innerHTML = html; 
  #match-list { display: grid; grid-template-columns: 25% 25% 25% 25%; padding: 10px; } #match-list {amp}gt; .rec { max-height: 200px; } .boxtop { position: relative; height: 80%; width: 100%; } .boxtop img { width: 100%; height: auto; display: block; background-size: cover; background-repeat: no-repeat; background-position: center; } .boxbot { position: relative; height: 20%; background: var(--c2); color: var(--c1); } 
 {amp}lt;html{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="receptai"{amp}gt; {amp}lt;div id="match-list"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt;