Сетка нарезает содержимое

Question

Я пытаюсь немного поработать с сетками css. До сих пор мне удавалось складывать это содержимое друг на друга, и когда экран становится меньше, я хочу отображать их в 2 строки по 2 столбца в каждом.

Проблема заключается в том, что при этом сетка нарезает содержимое? Как я могу предотвратить это?

Вот код, который я использовал:

    #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;
    }

Вот 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;">&nbsp;</div>
                    <a href="#">
                        <div id="story">
                            <img src="images/test.jpg" />

                            <div id="seperator">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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 большое изображение и news-rows - это изображение с четырьмя содержимым.

См. изображение вопроса здесь:

Answer 1

Сначала необходимо создать Мобильный , затем Рабочий стол . Вы будете использовать CSS3 @media, но min-width, т.е.: @media (min-width: 1024px){}. Удалите column-count из вашего кода. Вы должны разработать бесконечный столбец. Вы должны перенести столбец туда, куда хотите, используя grid-column-start и grid-row-start. Также вы должны использовать префикс CSS для поддержки браузера. Используйте классы вместо идентификаторов.

Вот фрагмент кода.

.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>

Объяснение кода:

Первый .main-container создает сетку для Мобильный вид, где используется grid-template-columns: repeat(1fr);. Нет сетки column-count свойство. Вместо margin-bottom я использую grid-row-gap: 30px; для пробела между столбцом внизу. Если окно браузера больше или равно 1024px, grid-template-columns: repeat(2, 1fr); /* Create two column in side by side */ и используется grid-column-gap: 30px; для разделения столбцов рядом друг с другом.

На этом этапе в Рабочий стол ваш ящик будет выглядеть следующим образом.

Во-вторых, если вы хотите передать box-3, где box-2 в Рабочий стол просмотреть в @media box-3 будет grid-column-start: 2;, grid-row-start: 1; и box-4 grid-column-start: 2;, grid-row-start: 2;. Box 4 будет автоматически изменять размер при установке column 3 Speci c CSS.

Теперь Рабочий стол просматривать изменения следующим образом.

Пожалуйста, прочитайте о CSS Сетка здесь .