Grid slices the content - css

Question

I am trying to work a little with the css grids. Until now I have managed to stack these contents on top of each other, and when the screen gets smaller, I want to display them in 2 rows with 2 columns each.
The problem is that when doing so, the grid is slicing up the content? How can I prevent this from happening?
Here is the code I used:
#top-story {
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
column-count: 4;
}
#top-story .top-news {
grid-row-start: 1;
grid-column-start: 1;
grid-column-end: 4;
}
#top-story .news-rows {
grid-row-start: 2;
column-count: 2;
}
Here is the HTML:
<div id="top-story">
<a href="#">
<div class="top-news">
<img src="images/test.jpg" />
<div id="gradient">
<div id="headline">
<div id="category">
Galleri
</div>
Forårstopscorer Jung: Fortjener ikke at blive sammenlignet med Kamil – endnu
</div>
</div>
</div>
</a>
<div class="news-rows">
Nyheder
<div style="width: 100%; height: 10px;"> </div>
<a href="#">
<div id="story">
<img src="images/test.jpg" />
<div id="seperator"> </div>
<div id="info">
<div id="inside-content">
<div id="category">
Galleri
</div>
Forårstopscorer Jung: Fortjener ikke at blive sammenlignet med Kamil – endnu
</div>
</div>
</div>
</a>
<br />
<a href="#">
<div id="story">
<img src="images/test.jpg" />
<div id="seperator"> </div>
<div id="info">
<div id="inside-content">
<div id="category">
Galleri
</div>
Forårstopscorer Jung: Fortjener ikke at blive sammenlignet med Kamil – endnu
</div>
</div>
</div>
</a>
<br />
<a href="#">
<div id="story">
<img src="images/test.jpg" />
<div id="seperator"> </div>
<div id="info">
<div id="inside-content">
<div id="category">
Galleri
</div>
Forårstopscorer Jung: Fortjener ikke at blive sammenlignet med Kamil – endnu
</div>
</div>
</div>
</a>
<br />
<a href="#">
<div id="story">
<img src="images/test.jpg" />
<div id="seperator"> </div>
<div id="info">
<div id="inside-content">
<div id="category">
Galleri
</div>
Forårstopscorer Jung: Fortjener ikke at blive sammenlignet med Kamil – endnu
</div>
</div>
</div>
</a>
</div>
</div>
top-news is the large image and news-rows is the one with the four contents.
See image of the issue here:

Answer 1

You have to design for Mobile first, then Desktop. You will use CSS3 #media but min-width i.e.: #media (min-width: 1024px){}. Remove column-count from your code. You have to design infinity column. You have to transfer the column where you want using grid-column-start and grid-row-start. Also you should use a CSS prefixer for browser support. Use classes instead of ids.
Here is the snippet.
.main-container{
display: grid;
grid-template-columns: repeat(1fr);
grid-row-gap: 30px;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
width: 100%;
}
#media (min-width: 1024px){
.main-container{
grid-column-gap: 30px;
grid-template-columns: repeat(2, 1fr);
}
}
.child-item{
background-color: green;
border: 2px solid black;
border-radius: 3px;
color: white;
height: 100px;
padding: 15px;
text-transform: uppercase;
}
#media (min-width: 1024px){
.box-3{
grid-column-start: 2;
grid-row-start: 1;
}
.box-4{
grid-column-start: 2;
grid-row-start: 2;
}
}
<div class="main-container">
<div class="child-item box-1">Box 1</div>
<div class="child-item box-2">Box 2</div>
<div class="child-item box-3">Box 3</div>
<div class="child-item box-4">Box 4</div>
</div>
Explanation of the code:
First .main-container creates grid for Mobile view where use grid-template-columns: repeat(1fr);. No grid column-count property. Instead of margin-bottom I use grid-row-gap: 30px; for space between column in bottom. If browser window is more than or equal to 1024px, grid-template-columns: repeat(2, 1fr); /* Create two column in side by side */ and use grid-column-gap: 30px; for separated from side by side column.
At this point in Desktop your box will be look like this.
Second, if you want to transfer box-3 where is box-2 in Desktop view in #media box-3 will be grid-column-start: 2;, grid-row-start: 1; and box-4 grid-column-start: 2;, grid-row-start: 2;. Box 4 will be auto resize when you set column 3 specific CSS.
Now Desktop view change like this.
Please read about CSS Grid here.