Как равномерно распределить ссылки на изображения с помощью сетки? - PullRequest
Новая
       68

Как равномерно распределить ссылки на изображения с помощью сетки?

1 голос
/ 11 апреля 2020

У меня есть несколько изображений, которые ссылаются на их отдельные сайты, но когда я пытаюсь поместить их в сетку, они просто накладываются друг на друга. Я обернул их в div и обернул каждую картинку, описание и цену в их собственный div, чтобы каждый элемент сетки мог упорядочить картинку, ее имя и цену. 

.apparel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
}

.shirt-name {
  font-weight: 600;
}

.price {
  font-weight: 500;
}

.shirt-pic img {
  width: 100%;
  height: auto;
}
<div class="apparel">
  <div id="original" class="left-side">
    <a class="shirt-pic" href="pages/original.html"><img src="images/original.png" alt="Shirt 1" /></a>
    <span class="shirt-name helvetica size-s capitalized">Original</span>
    <span class="price helvetica size-s">&#36;20.00</span>
  </div>
  <div id="design1" class="right-side">
    <a class="shirt-pic" href="pages/design1.html"><img src="images/design1.png" alt="Shirt 2" /></a>
    <span class="shirt-name helvetica size-s capitalized">Design 1</span>
    <span class="price helvetica size-s">&#36;30.00</span>
  </div>
  <div id="design2" class="left-side">
    <a class="shirt-pic" href="pages/design2.html"><img src="images/design2.png" alt="Design 2" /></a>
    <span class="shirt-name helvetica size-s capitalized">Design 2</span>
    <span class="price helvetica size-s">&#36;30.00</span>
  </div>
  <div id="tri-tone" class="right-side">
    <a class="shirt-pic" href="pages/tri-tone.html"><img src="images/tri-tone.png" alt="Tri Tone" /></a>
    <span class="shirt-name helvetica size-s capitalized">Tri-Tone</span>
    <span class="price helvetica size-s">&#36;40.00</span>
  </div>
</div>

Также работает ли grid, если я использую span вместо div? И как я могу убедиться, что цена и название центрированы под картинкой?

Ответы [ 2 ]

3 голосов
/ 11 апреля 2020

Просто используйте flex для центра: 

.apparel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
  text-align: center;
}

.shirt-name {
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}

.price {
  font-weight: 500;
}

.shirt-pic img {
  width: 50px;
  height: 50px;
}
<div class="apparel">
  <div id="original" class="left-side">
    <a class="shirt-pic" href="pages/original.html"><img src="http://placekitten.com/301/301" alt="Shirt 1" /></a>
    <span class="shirt-name helvetica size-s capitalized">Original</span>
    <span class="price helvetica size-s">&#36;20.00</span>
  </div>
  <div id="design1" class="right-side">
    <a class="shirt-pic" href="pages/design1.html"><img src="http://placekitten.com/301/301" alt="Shirt 2" /></a>
    <span class="shirt-name helvetica size-s capitalized">Design 1</span>
    <span class="price helvetica size-s">&#36;30.00</span>
  </div>
  <div id="design2" class="left-side">
    <a class="shirt-pic" href="pages/design2.html"><img src="http://placekitten.com/301/301" alt="Design 2" /></a>
    <span class="shirt-name helvetica size-s capitalized">Design 2</span>
    <span class="price helvetica size-s">&#36;30.00</span>
  </div>
  <div id="tri-tone" class="right-side">
    <a class="shirt-pic" href="pages/tri-tone.html"><img src="http://placekitten.com/301/301" alt="Tri Tone" /></a>
    <span class="shirt-name helvetica size-s capitalized">Tri-Tone</span>
    <span class="price helvetica size-s">&#36;40.00</span>
  </div>
</div>
0 голосов
/ 16 апреля 2020

Это просто еще один способ сделать вертикальное направление: 

.shirt-name {
  font-weight: 600;
  display: block;    
}

Поскольку span равно встроенному элементу , то вам нужно установить display: block, чтобы убедиться, что следующий элемент будет в следующей строке.

...