Как сделать так чтобы кнопка не оставляла отступов. Верстка

117

16 февраля 2021, 09:50

Учусь делать адаптивную верстку с помощью сетки grid. У меня получилось то что я хотел, но в итоге происходит смещение кнопки внутри блока. Это происходит из-за длинны текста. Где-то есть короткие названия товара, а где-то название вываливается на вторую строку и из-за этого кнопка оставляет отступы. Мне нужно сделать так чтобы кнопка была приклеена к самому низу блока и не двигалась в зависимости текста.

html

<div class="product_grid">
    <div class="product_section">
        <div>
            <a href="{% url 'shop:product_show' product.slug %}">
                <div>
                    <img src="{{product.image.url}}" alt="Изображение - {{product.image.name}}">
                    <div class="product_text">{{product.name}}</div>
                    <span class="product_price">{{product.price}} &#8381;</span>
                </div>
            </a>
        </div>
        <div>
            <button class="add_to_cart" data-slug="{{product.slug}}">Добавить в корзину</button>
        </div>
    </div>
</div>

css

.product_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: minmax(150px, auto);
    grid-row-gap: 10px;
    grid-column-gap: 4%;
    padding: 20px;
}
.product_section {
    border: 1px solid gray;
    border-radius: 5px;
    text-align: center;
}

Здесь вы можете заметить, что кнопка Добавить в корзину оставляет отступы в некоторых секциях. Например, в товаре с ценой 1920 и 1000 виден некрасивый отступ. Это происходит из-за короткого названия товара. Как сделать так чтобы кнопка была всегда внизу без отступов как в других секциях и не прыгала.

Answer 1

Можно попробовать сделать так:

@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&display=swap"); 
* { 
  box-sizing: border-box; 
} 
 
.row { 
  font-family: 'Roboto Condensed', sans-serif; 
  max-width: 800px; 
  width: 100%; 
  margin: 0 auto; 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 3rem; 
} 
.row > * { 
  border: 1px solid rgba(0, 0, 0, 0.1); 
  padding: 1rem 2rem; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
} 
.row .text { 
  font-weight: 700; 
  text-align: center; 
} 
.row .button { 
  border: 1px solid grey; 
  padding: 10px 12px; 
  text-align: center; 
  margin-top: 2rem; 
} 
.row .image { 
  margin-bottom: 1rem; 
} 
.row .image img { 
  vertical-align: middle; 
  max-width: 100%; 
}

<div class="row"> 
	<div class="item"> 
		<div class="description"> 
			<div class="image"> 
				<img src="https://cdn.tmobile.com/content/dam/t-mobile/en-p/cell-phones/lg/lg-q7-plus/moroccan-blue/LG-Q7_Plus-Moroccan_Blue-1-3x.jpg" alt=""> 
			</div> 
			<div class="text"> 
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, tenetur? 
			</div> 
		</div> 
		<div class="button">Add to cart</div> 
	</div> 
	<div class="item"> 
		<div class="description"> 
			<div class="image"> 
				<img src="https://cdn.tmobile.com/content/dam/t-mobile/en-p/cell-phones/apple/apple-iphone-xr/blue/Apple-iPhoneXr-Blue-1-3x.jpg" alt=""> 
			</div> 
			<div class="text"> 
				Lorem ipsum dolor sit amet. 
			</div> 
		</div> 
		<div class="button">Add to cart</div> 
	</div> 
	<div class="item"> 
		<div class="description"> 
			<div class="image"> 
				<img src="https://ecommerce.laraship.com/media/demo/app-iph-x/Apple-iPhoneX-Silver-1-3x.jpg" alt=""> 
			</div> 
			<div class="text"> 
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora nisi in impedit tenetur dolorem voluptatum unde molestias eligendi. 
			</div> 
		</div> 
		<div class="button">Add to cart</div> 
	</div> 
</div>

Answer 2

Я нашел решение моей проблемы. Нужно было просто поставить позиционирование. И поставить высоту блока.

.product_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: minmax(150px, auto);
    grid-row-gap: 10px;
    grid-column-gap: 4%;
    padding: 10px;
}
.product_section {
    position: relative;
    text-align: center;
    border: 1px solid gray;
    border-radius: 5px;
    height: 320px;
}
.add_to_cart {
    position: absolute; 
    left: 0; right: 0; 
    bottom: 0;
    margin: 0 auto;
    width: 170px;
}

Вот что мне нужно было