Блог

Главная - Вопросы по программированию - Я пытаюсь создать сетку, в которой объекты в моей сетке отображаются в виде прямоугольника, а не линии

Я пытаюсь создать сетку, в которой объекты в моей сетке отображаются в виде прямоугольника, а не линии

#html #css

Вопрос:

Я пытался делать это время от времени в течение нескольких месяцев, и я думаю, что просто не понимаю, что именно делает мой код. Я никогда раньше не публиковал здесь вопрос, поэтому извините, если у меня возникли проблемы с форматированием или я что-то сделал неправильно. Вот мой HTML/CSS код:

 {% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'characters/style.css' %}">

<style>
    .grid-container {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(5, 150px);
        grid-template-rows: repeat(5, 100px);
        align-items: initial;
    }

    .grid-item {
        border: 5px solid #87b5ff;
        border-radius: 3px;
        font-size: 2em;
        font-family: sans-serif;
        font-weight: bold;
        background-color: #1c57b5
    }


</style>

<div class="grid-container">
    {% if character_list %}
        <ul>
        {% for character in character_list %}
            <div class="grid-item">
                <li>
                    <a href="{% url 'characters:detail' character.id %}">
                        <img src={{character.stock.url}} width="100" height="100" class="center">
                    </a>
                </li>
            </div>
        {% endfor %}
        </ul>
</div>
    {% else %}
        <p>No characters are available.</p>
    {% endif %}

Вот как это выглядит в настоящее время, я хочу, чтобы оно было разложено более горизонтально, с 4 значками в строке
текущий

Ответ №1:

  1. Неупорядоченный список (т. е. ul) не нужен, и то, как вы его структурируете, вызовет проблемы. Вы отделяете li от его ul с помощью div для каждого элемента сетки. Удалите неупорядоченный список.
  2. У вас есть сетка из пяти столбцов, и вы ожидаете четыре элемента в строке. Это не будет делать то, что вы хотите (если вы не начнете контролировать промежутки ячеек сетки, что вы не пытаетесь делать).

Попробуйте что-нибудь вроде этого; там, где вы видите номер, замените его тегами привязки и изображения:

 .grid-container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(4, 150px); /* notice 4 columns not five */
  grid-template-rows: repeat(5, 100px);
  align-items: initial;
}

.grid-container > div {
  border: 5px solid #87b5ff;
  border-radius: 3px;
  font-size: 2em;
  font-family: sans-serif;
  font-weight: bold;
  background-color: #1c57b5;
}
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

введите описание изображения здесь

Комментарии:

1. Большое вам спасибо, неупорядоченный список все испортил, теперь он выглядит намного лучше!

Ответ №2:

Предполагая, что у вас последняя версия Bootstrap, вы можете создать макет сетки, выровняв столбцы в строку, как это:

 <div class="container">
  <div class="row">
    <div class="col">
      Image 1
    </div>
    <div class="col">
      Image 2
    </div>
    <div class="col">
      Image 3
    </div>
    <div class="col">
      Image 4
    </div>
  </div>
</div>

Продолжайте дублировать строки, если вам нужно больше, или добавьте больше столбцов, если вам нужно, создав больше разделителей с col классом. Вы также можете изменить ширину своих столбцов. Более подробную информацию можно найти здесь.

Метки: , ,