Возникли проблемы с получением определенного макета CSS Grid - PullRequest
Новая
       16

Возникли проблемы с получением определенного макета CSS Grid

1 голос
/ 15 марта 2019

Я пытаюсь создать страницу корзины покупок.Это моя цель:

shopping cart image

Я думал об использовании Flexbox, так как это одномерный макет, но хотел немного попрактиковаться с CSS Grid.Я думаю, что CSS Grid - хорошее решение, потому что я вижу 6 столбцов неравного размера.Я думаю, что я близко, но мое расстояние еще далеко.Это то, что я до сих пор: 

.shopping-cart .product-row {
 
  display: grid;
  grid-template-columns: repeat(6, auto);
  border-bottom: 1px solid #eee;
}


.shopping-cart .product-row .product-image  img {
    width: 100px;
}

.shopping-cart .product-row .product-details   {
  display: inline-block;
  grid-column-start: 2;
  grid-column-end: 3;
}

.shopping-cart .product-row .product-details .product-description  {
    display: inline-block;
    margin: 5px 20px 0px 0;
    width: 50%; 
    line-height: 1.4em;
}

.shopping-cart .product-row .product-quantity input {
    width: 40px;
}
<div class="shopping-cart">

    <div class="product-row">

        <div class="product-image">
                <img src="https://www.drivencoffee.com/wp-content/uploads/2016/03/Scandinavian-Blend-coffee.jpg" />
        </div>

        <div class="product-details">
            <div class="product-title">Coffee</div>
            <div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  </div>
        </div>
        <div class="product-price">12.99</div>
        <div class="product-quantity">
            <input type="number" value="2" min="1" />
        </div>

        <div clas="product-removal">
            <button class="remove-product">
                Remove
            </button>
        </div>

        <div class="product-total-price">
            25.98
        </div>
    </div>




</div>

Вот кодовое перо того же кода

Я думаю, что моя проблема с grid-template-columns: repeat(6, auto).Он создает 6 столбцов, и каждый столбец имеет такой же большой размер, как и содержимое внутри него.Я просто не знаю, как добиться точного позиционирования.

Спасибо за любую помощь.

Ответы [ 5 ]

1 голос
/ 16 марта 2019

Согласно моим комментариям к этому вопросу, вы можете попробовать создать макет из 8 столбцов, используя grid-template-columns: repeat(8, 1fr) и использовать grid-column: span 3 для элемента product-details - см. Демонстрацию ниже: 

.shopping-cart .product-row {
 
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* CHANGED */
  border-bottom: 1px solid #eee;
}


.shopping-cart .product-row .product-image  img {
    width: 100px;
}

.shopping-cart .product-row .product-details   {
  display: inline-block;
  grid-column: span 3; /* CHANGED */
}

.shopping-cart .product-row .product-details .product-description  {
    display: inline-block;
    margin: 5px 20px 0px 0;
    width: 50%; 
    line-height: 1.4em;
}

.shopping-cart .product-row .product-quantity input {
    width: 40px;
}
<div class="shopping-cart">

    <div class="product-row">

        <div class="product-image">
                <img src="https://www.drivencoffee.com/wp-content/uploads/2016/03/Scandinavian-Blend-coffee.jpg" />
        </div>

        <div class="product-details">
            <div class="product-title">Coffee</div>
            <div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  </div>
        </div>
        <div class="product-price">12.99</div>
        <div class="product-quantity">
            <input type="number" value="2" min="1" />
        </div>

        <div clas="product-removal">
            <button class="remove-product">
                Remove
            </button>
        </div>

        <div class="product-total-price">
            25.98
        </div>
    </div>




</div>
0 голосов
/ 15 марта 2019

Это решение использует имена столбцов шаблона сетки и присваивает их, где это необходимо.Некоторые настройки шаблона используют minmax() для обеспечения некоторой гибкости.Конечно, вы должны отрегулировать их в соответствии с вашими спецификациями.

Раздел product-details установлен на flex с макетом column.

Также включена часть заголовка изOP изображение нужного макета.Это также устанавливается как сетка, и соответствующие имена столбцов назначаются меткам заголовка.

Кроме того, некоторые незначительные улучшения представляют собой небольшой отступ для product-title (как показано на прилагаемом изображении из OP)а также предварительно добавляя $ к значению product-price.

Преимущества для именованных шаблонов сетки заключаются в том, что присваивание выполняется легко, а установка значений ячеек сетки легко редактируется без особого обдумывания того, какой номерстолбец я редактирую, например. 

.shopping-cart,
.product-row > div {
  display: flex;
  justify-content: center;
}

.shopping-cart {
  flex-direction: column;
}

.shopping-cart__header,
.shopping-cart .product-row {
  display: grid;
  grid-template-columns: [product-image] 6rem [product-details] minmax(11rem, 24rem) [product-price] 5rem [product-quantity] 5rem [product-removal] 6rem [product-total-price] 5rem;
  grid-column-gap: 0.5rem;
  grid-template-rows: 1fr;
  border-bottom: 1px solid #eee;
  align-items: center;
}

[class*="shopping-cart__header__label"] {
  text-align: center;
}

.shopping-cart__header__label-price {
  grid-column-start: product-price;  
}

.shopping-cart__header__label-quantity {
  grid-column-start: product-quantity;  
}

.shopping-cart__header__label-total {
  grid-column-start: product-total-price;  
}

.shopping-cart .product-row .product-image  img {
    width: 100%;
}

.shopping-cart .product-row .product-image {
  grid-column-start: product-image;
}

.shopping-cart .product-row .product-details {
  grid-column-start: product-details;
  display: flex;
  flex-direction: column;
  padding: 0.625rem;
}

.shopping-cart .product-row .product-details .product-title {
  padding-left: 0.635rem;
}

.shopping-cart .product-row .product-price {
  grid-column-start: product-price;
}

.shopping-cart .product-row .product-quantity {
  grid-column-start: product-quantity;
}

.shopping-cart .product-row .product-quantity input {
    width: 2.5rem;
}

.shopping-cart .product-row .product-removal {
  grid-column-start: product-removal;
}

.shopping-cart .product-row .product-total-price {
  grid-column-start: product-total-price;
}

.shopping-cart .product-row .product-total-price:before {
  content: '$';
}
<div class="shopping-cart">
   <header class="shopping-cart__header">
     <span class="shopping-cart__header__label-price">Price</span>
     <span class="shopping-cart__header__label-quantity">Quantity</span>
     <span class="shopping-cart__header__label-total">Total</span>
   </header>
    <div class="product-row">

        <div class="product-image">
                <img src="https://www.drivencoffee.com/wp-content/uploads/2016/03/Scandinavian-Blend-coffee.jpg" />
        </div>

        <div class="product-details">
            <div class="product-title">Coffee</div>
            <div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  </div>
        </div>
        <div class="product-price">12.99</div>
        <div class="product-quantity">
            <input type="number" value="2" min="1" />
        </div>

        <div clas="product-removal">
            <button class="remove-product">
                Remove
            </button>
        </div>

        <div class="product-total-price">
            25.98
        </div>
    </div>




</div>
0 голосов
/ 15 марта 2019

Я использовал bootstrap для решения этой проблемы.

Bootstrap очень отзывчивый для разных размеров дисплея, посмотрите код ниже 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="row">
        <div class="col-xs-2">
                <img style="width: 100%;" src="https://www.drivencoffee.com/wp-content/uploads/2016/03/Scandinavian-Blend-coffee.jpg" />
        </div>

        <div class="col-xs-2">
            <div class="product-title">Coffee</div>
            <div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  </div>
        </div>
        <div class="col-xs-2">12.99</div>
        <div class="col-xs-2">
            <input type="number" value="2" min="1" />
        </div>

        <div class="col-xs-2">
            <button class="remove-product">
                Remove
            </button>
        </div>

        <div class="col-xs-2">
            25.98
        </div>
    </div>
0 голосов
/ 15 марта 2019

Я знаю, что вы спрашиваете о решении для css grid , но я думаю, что ваша первая идея была лучше.Корзина покупок - это СПИСОК элементов, из которых некоторые имеют более или менее фиксированный размер и положение, а другое, описание, необходимо адаптировать в зависимости от ширины.Для меня это список изгибаемых элементов с добавлением flex-flow: row nowrap к описанию flex: auto.

Кроме того, нет необходимости в строке заголовков, так как концепции понятны, если вы упорядочите их правильно: Фото> описание> цена x [количество]> всего> действия.

Я разветвил вашу ручку, чтобы показать вам пример: https://codepen.io/jesuke/pen/aMYGdv

Однако, если вы считаете, что требуются заголовки, то, что выищу таблицу данных с фиксированной раскладкой Я считаю.Фиксированный макет даст вам точное позиционирование, которое вы ищете.

0 голосов
/ 15 марта 2019

Почему бы не попробовать использовать старые методы: Хотите использовать сетку? 

.row {
  display: block;
}

img, input {
  max-width: 100%;
}

.img {
  width: 64px;
}

.amount {
  width: 56px;
}

.details {
  width: calc(100% - 64px * 5);
}

.col {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid red;
}
<div class="shopping-cart">
    <div class="row">
        <div class="col img"><img src="https://www.drivencoffee.com/wp-content/uploads/2016/03/Scandinavian-Blend-coffee.jpg"/></div>
        <div class="col details">
                    <div class="product-title">Coffee</div>
            <div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  </div>
        </div>
        <div class="col">12.99</div>
        <div class="col amount"><input type="number" value="2" min="1" /></div>
        <div class="col"><button class="remove-product"> Remove </button></div>
        <div class="col">25.98</div>
    </div>
</div>
...