Как я могу заставить эти изображения оставаться в «сетке»?

Question

поэтому у меня есть несколько изображений с текстом под ними, я хочу, чтобы они были одинакового размера. И это сработало, но я также хочу, чтобы они были в каком-то «растре», а не видимом. Но так они на 1 линии. Я даже не знаю, правильно ли CSS. Также было бы здорово, если бы кто-то пожертвовал, его изображение и имя появилось бы прямо на сайте, это, вероятно, сложно. Так что выравнивание изображений мне достаточно.

CSS

.col-md_staffblock{
    margin: 30px auto;
    margin-bottom: 5px auto;
    padding: 10px 10px; 
}

HTML

<h1 >DONATORS</h1>
        <p>Donations help us keep our servers online 24/7.</p>
        <div class="row stafflist">

            <div class="col-md_staffblock">
                <img width="100px;" src="img/JOSH_KING222.png">
                <h2>JOSH_KING222</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="img/BuddySven.png">
                <h2>BuddySven</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="img/AllexX.png">
                <h2>AllexX</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="img/fond99.png">
                <h2>fond99</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="img/II_Sebs.png">
                <h2>II_Sebs</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="img/obesemessFTW69.png">
                <h2>obesemessFTW69</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="img/DcemilO.png">
                <h2>DcemilO</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="img/sonicboom62798.png">
                <h2>sonicboom62798</h2>
                <p>Donator</p>
            </div>
        </div>

И это html одинаково для каждого изображения.

Answer 1

Как я понял ваш вопрос, мое решение для него выглядит так: -

HTML Я изменил ваши изображения, чтобы у меня был предварительный просмотр, вы можете использовать изображения по умолчанию, если хотите

<h1 >DONATORS</h1>
        <p>Donations help us keep our servers online 24/7.</p>
        <div class="row stafflist">

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>JOSH_KING222</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>BuddySven</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>AllexX</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>fond99</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>II_Sebs</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>obesemessFTW69</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>DcemilO</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>sonicboom62798</h2>
                <p>Donator</p>
            </div>
        </div>

Обычный CSS

.stafflist {
  display: flex;
}

.col-md_staffblock  {
  margin: 10px
}

h2 {
  font-size: 12px
}

Использование CSS3 grids Просто измените число 8 на любое число, которое вы хотите, и вы получите сетку из X столбцов

.stafflist {
  display: grid;
  grid-template-columns: repeat(8, 1fr) ;

}

Надеюсь, это поможет

Answer 2

на основе ответа Matz, вы можете использовать сетку css для вашего класса .stafflist, так как вы фиксируете свой div, чтобы отображать 8 столбцов, распределенных по вашей странице

.stafflist {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;

}

, как я упоминал ранее в Мой комментарий попробуйте прочитать больше о css grid, это очень полезно, и вы будете иметь полный контроль над отзывчивой страницей.