更改第一个单元格的大小
我想更改网格的第一个“生成”单元格的大小。在 javascript 在其上打印 RSS 信息之前，html 中不存在网格，因此我无法直接定位行或单元格。
注意：第一个元素设置为display:none;因为它会重复自己。
想要的结果： https: //i.imgur.com/x07Egoz.png
实际网格： https: //codepen.io/jinzagon/pen/JjXMXxo
CSS
body {
margin: 1rem;
display: grid;
background-color:#272d32;
grid-template-columns: repeat(auto-fit, minmax(250px, 250px));
grid-gap: 2rem;
}
img {
max-width: 100%;
box-shadow: 0 0 3px #B0BEC5;
width: 100%;
/* height: 100%;*/
object-fit: cover;
display: block;
}
article {
background: #ECEFF1;
border-radius: 4px;
overflow: hidden;
height: 250px;
font: 12px/1.1 system-ui, sans-serif;
a {
text-decoration: none;
color: #455A64;
&:hover, &:focus {
color: #2196F3;
}
}
h2 {
padding: 1rem 1rem;
margin: 0;
}
}
article:first-of-type {
display:none;
}
JS
const RSS_URL = 'https://cors-anywhere.herokuapp.com/https://fitgirl-repacks.site/feed/';
fetch(RSS_URL)
.then(response => response.text())
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
.then(data => {
console.log(data);
const items = data.querySelectorAll("item");
let html = ``;
items.forEach(el => {
var image = null;
var encoded = new window.DOMParser().parseFromString(
el.getElementsByTagNameNS("*", "encoded").item(0).innerHTML,
"text/html"
);
// console.log(encoded.querySelectorAll('img').item(0) ? null.src)
if (encoded.querySelector('img') != null) {
image = encoded.querySelector('img').src;
} else {
return true;
}
html += `
<article>
<!--<h2>${el.querySelector("title ").innerHTML}
</h2>
<a href="${el.querySelector("link").innerHTML}" target="_blank" rel="noopener">
</a>-->
<img src="${image}" alt="" />
</article>
`;
});
document.body.insertAdjacentHTML("beforeend", html);
});
呼啦一阵风2回答
-
慕村225694
...所以我不能直接定位一行或一个单元格。你可以使用nth-of-type(2)？body { margin: 1rem; display: grid; background-color: #272d32; grid-template-columns: repeat(auto-fit, minmax(250px, 250px)); grid-gap: 2rem;}img { max-width: 100%; box-shadow: 0 0 3px #B0BEC5; width: 100%; /* height: 100%;*/ object-fit: cover; display: block;}article { background: #ECEFF1; border-radius: 4px; overflow: hidden; height: 250px; font: 12px/1.1 system-ui, sans-serif;}article a { text-decoration: none; color: #455A64;}article a:hover,article a:focus { color: #2196F3;}article h2 { padding: 1rem 1rem; margin: 0;}article:first-of-type { display: none;}article:nth-of-type(2) { grid-column: 1 / 3; grid-row: 1 / 3; height: calc(500px + 2rem)}<article> <!--<h2>Upcoming repacks </h2> <a href="https://fitgirl-repacks.site/upcoming-repacks-3/" target="_blank" rel="noopener"> </a>--> <img src="https://i112.fastpic.ru/big/2020/0904/6f/390a35bb4af268efc406df7092e0566f.jpg" alt=""></article><article> <!--<h2>WRC 9 FIA World Rally Championship – Deluxe Edition + 4 DLCs </h2> <a href="https://fitgirl-repacks.site/wrc-9/" target="_blank" rel="noopener"> </a>--> <img src="https://i112.fastpic.ru/big/2020/0904/6f/390a35bb4af268efc406df7092e0566f.jpg" alt=""></article><article> <!--<h2>Desperados III – v1.4.11.r35885.F + DLC </h2> <a href="https://fitgirl-repacks.site/desperados-3/" target="_blank" rel="noopener"> </a>--> <img src="https://i112.fastpic.ru/big/2020/0611/b0/9d2d6cd9831af6219c231b80a66050b0.jpg" alt=""></article><article> <!--<h2>Ary and the Secret of Seasons </h2> <a href="https://fitgirl-repacks.site/ary-and-the-secret-of-seasons/" target="_blank" rel="noopener"> </a>--> <img src="https://i112.fastpic.ru/big/2020/0902/48/2cf078dae0fcbff545c79346f80fcd48.jpg" alt=""></article><article> <!--<h2>Crusader Kings III – v1.0.2 + 2 DLCs + Multiplayer </h2> <a href="https://fitgirl-repacks.site/crusader-kings-3/" target="_blank" rel="noopener"> </a>--> <img src="https://i112.fastpic.ru/big/2020/0902/43/eca1095d8782e7bdcd6f6ea5cfa45e43.jpg" alt=""></article><article> <!--<h2>Iron Harvest – v1.0.0.1600 rev.37863 (Build 5487982) </h2> <a href="https://fitgirl-repacks.site/iron-harvest/" target="_blank" rel="noopener"> </a>--> <img src="https://i112.fastpic.ru/big/2020/0901/ca/3b9619cd2c253ec78d94abfc00415eca.jpg" alt=""></article><article> <!--<h2>Evergate – v1.02/Build 5487187 </h2> <a href="https://fitgirl-repacks.site/evergate/" target="_blank" rel="noopener"> </a>--> <img src="https://i112.fastpic.ru/big/2020/0901/e1/93dd0a0484b586c8df76480fe36ccce1.jpg" alt=""></article><article> <!--<h2>Radical Relocation – v1.0.0P9 + All Levels Unlocker </h2> <a href="https://fitgirl-repacks.site/radical-relocation/" target="_blank" rel="noopener"> </a>--> <img src="https://i112.fastpic.ru/big/2020/0831/89/975d31cea79f6ac8c543219b05be0489.jpg" alt=""></article><article> <!--<h2>Immortal Realms: Vampire Wars </h2> <a href="https://fitgirl-repacks.site/immortal-realms-vampire-wars/" target="_blank" rel="noopener"> </a>--> <img src="https://i112.fastpic.ru/big/2020/0831/ec/9e7ee3ca4c50ca7b1ebdd48647fba4ec.jpg" alt=""></article></body> -
胡子哥哥
您可能希望根据需要添加和调整跨度值：https grid-column: //codepen.io/oieeaaaa/pen/dyMJXVRgrid-rowarticle:first-of-type
随时随地看视频慕课网APP
相关分类
JavaScript
