问题
NEW IMAGE HERE [IMAGE ONE][2]
[IMAGE TWO][3]
Hello! I am trying to make a blog post section as the one shown in Image One. It consists of a CSS Grid with four divs inside, each one is a cell that occupies 1fr of the wrapper element, has an img, a h6 and p elements inside as you can see in Image One. This is all put inside a Javascript Slideshow, meaning that each slide for the slideshow is made of CSS Grid.
My problem/goal: I want to create an admin site in which to upload a new image and text through a form, and that to be a new div/cell added to the grid, making the previous grid cells move and occupy other slides in the slideshow. This would be sort of like in a phone where you have multiple screens to put apps, and when you add a new app the other's move into new screens that are automatically created. Hope this analogy clarifies the problem.
My question: Is it possible to do this in Css grid or are grid cells fixed to their position? If possible, could anybody give me a hint on how to move on from here? I am really stuck. I would like to know through what language I can achieve adding a new div that makes the other ones move on to new slides. Is it PHP?
I hope someone has this answer because I cannot move on from this point. Thank you very much.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#contentContainer {
width: 550px;
height: 350px;
border: 5px black solid;
overflow: hidden;
}
#wrapper {
width: 2200px; /* size of the slider per number of slides */
transform: translate3d(0, 0, 0);
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.content {
float: left;
width: 550px;
height: 350px;
white-space: normal;
background-repeat: no-repeat;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.div1 {
grid-area: 1 / 1 / 2 / 2;
background-color: blue;
text-align: center;
}
.div2 {
grid-area: 1 / 2 / 2 / 3;
background-color: red;
text-align: center;
}
.div3 {
grid-area: 2 / 2 / 3 / 3;
background-color: violet;
text-align: center;
}
.div4 {
grid-area: 2 / 1 / 3 / 2;
background-color: orange;
text-align: center;
}
.div1 img {
max-width: 100%;
max-height: 50px;
}
.div2 img {
max-width: 100%;
max-height: 50px;
}
.div3 img {
max-width: 100%;
max-height: 50px;
}
.div4 img {
max-width: 100%;
max-height: 50px;
}
#itemOne {
background-color: #ADFF2F;
background-image: url("");
}
#itemTwo {
background-color: #FF7F50;
background-image: url("");
}
#itemThree {
background-color: #1E90FF;
background-image: url("");
}
#itemFour {
background-color: #DC143C;
background-image: url("");
}
#navLinks {
text-align: center;
width: 550px;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: #CCCCCC;
padding: 5px;
border-radius: 50%;
border: black 5px solid;
}
#navLinks ul li:hover {
background-color: #FFFF00;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
<div class="div1">
<a href="">
<img src="">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
<div class="div2">
<a href="">
<img src="">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
<div class="div3">
<a href="">
<img src="" alt="Description">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
<div class="div4">
<a href="">
<img src="" alt="Description">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
</div>
<div id="itemTwo" class="content">
<div class="div1">
<a href="">
<img src="" alt="Description">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
<div class="div2">
<a href="">
<img src="" alt="Description">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
<div class="div3">
<a href="">
<img src="" alt="Description">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
<div class="div4">
<a href="">
<img src="" alt="Description">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
</div>
<div id="itemThree" class="content">
<div class="div1">
<a href="">
<img src="" alt="Description">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
<div class="div2">
<a href="">
<img src="" alt="Description">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
<div class="div3">
<a href="">
<img src="" alt="Description">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
<div class="div4">
<a href="">
<img src="" alt="Description">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
</div>
<div id="itemFour" class="content">
<div class="div1">
<a href="">
<img src="" alt="Description">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
<div class="div2">
<a href="">
<img src="" alt="Description">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
<div class="div3">
<a href="">
<img src="" alt="Description">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
<div class="div4">
<a href="">
<img src="" alt="Description">
<h6>Project Title</p>
<p>Brief Description</p>
</a>
</div>
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
<script>
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
var position = link.getAttribute("data-pos");
var translateValue = "translate3d(" + position + ", 0px, 0)";
wrapper.style.transform = translateValue;
link.classList.add("active");
}
</script>
</body>
</html>´´´
[2]: https://i.stack.imgur.com/6q0I8.png
[3]: https://i.stack.imgur.com/jlOm8.png
来源：https://stackoverflow.com/questions/60048338/php-sql-post-section