By user3240998


2019-06-21 23:38:45 8 Comments

I have a list of wares. I need to show them in a 2-dimensional list. Every ware has daughter elements: photo, title, description, price and buy button, which must be sized and positioned in this way: all titles, description, price and photo in a wares row must be at the same y-coordinate position and have height which is maximum of corresponding height element in a row.

Ive tried this: "grid-template-rows: 1fr 1fr 1fr 1fr 30px;" to make all daughter elements in a row be at the same y-position, but I need their height to fit the content and be not higher then maximum element in a row. P.S. You may provide code using flex or whatever you want.

CODE

.Grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat( auto-fill, 280px);
}

.loon-card {
  grid-template-rows: 1fr 1fr 1fr 1fr 30px;
  display: grid;
  grid-gap: 10px;
  border: 1px solid #ddd;
  padding: 10px;
}

.long-description {
  border-top: 1px solid #ddd;
}
<div class="Grid">

  <div class="loon-card">
    <img src="">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>12.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
      <br/>Title:5
      <br/>Title:6
      <br/>Title:7
      <br/>Title:8
      <br/>Title:9
      <br/>Title:10
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
      <br/>Title:5
      <br/>Title:6
      <br/>Title:7
      <br/>Title:8
      <br/>Title:9
      <br/>Title:10

    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>12.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>14.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>15.00$</div>
    <button>buy</button>
  </div>

</div>

1 comments

@Paulie_D 2019-06-22 20:23:15

This is not possible at present (2019/06)* with any CSS layout method.

display:subgrid solves the issue but it has limited non-experimental adoption by browsers as yet.*

*[2019/12 Update] - Subgrid is now shipped in Firefox 71

--

It is enabled, by default, in Firefox 71+ so it is possible to test. Until this is fully adopted Javacript is needed to equalise element heights.

A couple of resources links from Rachel Andrew (a CSS-Grid envangalist)

  1. https://rachelandrew.co.uk/archives/2019/04/16/css-subgrid-news-and-demos/

and

  1. YouTube video on subgrid

  2. And Another

* {   margin: 0;   padding: 0;   box-sizing: border-box; }  ::before, ::after {   box-sizing:inherit; }

.Grid {
  display: grid;
  width:90%;
  margin:auto;
  grid-gap: 10px;
  grid-template-columns: repeat( auto-fill, 280px);
}

.loon-card {
  display:grid;
  grid-row: span 5; /* as we have 5 card components in each card */
  grid-template-rows:subgrid;
  border: 1px solid #ddd;
  padding: 10px;
}

.long-description {
  border-top: 1px solid #ddd;
}

.price {
padding:.5em;
text-align:center;
}

img {
  max-width:100%;
  display: block;
}
<div class="Grid">

  <div class="loon-card">
    <img src="http://www.fillmurray.com/300/200">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>12.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="http://www.fillmurray.com/300/200">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
      <br/>Title:5
      <br/>Title:6

    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>12.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="http://www.fillmurray.com/300/200">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>14.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="http://www.fillmurray.com/300/200">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>15.00$</div>
    <button>buy</button>
  </div>

</div>

Resulting output (FF Nightly)

enter image description here

Related Questions

Sponsored Content

21 Answered Questions

[SOLVED] Vertically align text next to an image?

3 Answered Questions

[SOLVED] How can I select the first word of every line of a block of text?

1 Answered Questions

[SOLVED] insert a html as an object into html without scrollbar

1 Answered Questions

[SOLVED] Blank white space at the top of screen

6 Answered Questions

[SOLVED] Highlight an individual word within a text block on hover

1 Answered Questions

[SOLVED] Bold text inside a flex container not appearing inline

  • 2016-09-01 02:09:06
  • Nick
  • 1055 View
  • 4 Score
  • 1 Answer
  • Tags:   html css flexbox

4 Answered Questions

[SOLVED] Is margin possible for a <div> in css?

  • 2010-11-16 18:34:32
  • Justmac
  • 213 View
  • 3 Score
  • 4 Answer
  • Tags:   html css xhtml

Sponsored Content