Using position:absolute while keeping it inside the document flow

Question

It\'s a screenshot from a page currently I\'m building. I\'m trying to make su

Answer 1

At some point in the (hopefully near) future, you'll be able to use the subgrid feature of CSS Grids. Currently, only Firefox supports this, but other browsers should add support soon.

Subgrid enables you to use Grid features with a non-flat structure (eg, an unordered list). That is, you can line up children of one element with children of another element, or in this case, the image, title, description, and price button.

.list-product-pat {
  /* Create a grid with 5 columns that are 175px wide,
     each with 5 rows that are sized based on the smallest item in the row */
  display: inline-grid;
  grid-template-columns: repeat(5, 175px);
  grid-template-rows: repeat(5, min-content);

  /* Colors and spacing to match design */
  background: #f4f4f4;
  padding: 1em;
  grid-column-gap: 1em;
  border: 1px solid #ffffd;
}

.list-product-pat li {
  /* Ensure this item takes up the column */
  grid-row: 1 / -1;

  /* Make children grid items */
  display: grid;

  /* Use parent's grid for children */ 
  grid-template-rows: subgrid;

  /* Styles to match design */
  text-align: center;
  justify-items: center;
  border: 1px solid #ffffd;
  background: #fff;
}

/* STYLES TO MATCH DESIGN BELOW */

.list-product-pat > li > img {
  margin-top: 1em;
}

.list-product-pat > li > h1 {
  margin: .8em 0;
  font-size: 1em;
}

.list-product-pat > li > p {
  margin: 0;
  color: #bbb;
  font-size: .8em;
  margin: 0 .5em 1em;
}

.list-product-pat > li > a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  background: linear-gradient(#60bb76, #48b161);
  border-radius: .5em;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
  padding: .5em;
  min-width: calc(100% - 1em);
  margin-bottom: .5em;
  box-sizing: border-box;
}

.list-product-pat > li > a > small {
  display: block;
  font-weight: normal;
  font-size: .7em;
  margin-top: .2em;
}

  

    
    
HTC Desire C
    
GSM, GPS, WiFi, kamera 5MP, bluetooth, Android, touchscreen, 600MHz
    1.699.000 6 Produk/4 Website
  
  

    
    
Samsung 19300 Galaxy S III
    
GSM, GPS, WiFi, kamera 8MP, bluetooth, Android, touchscreen, 1.4GHz
    5.300.000 8 Produk/5 Website
  
  

    
    
Samsung Galaxy Grand i9082
    
GSM, GPS, WiFi, touchscreen, 1.2GHz
    3.499.000 10 Produk/8 Website
  
  

    
    
Apple iPhone 5 16GB
    
GSM, GPS, WiFi, kamera 8MP, bluetooth, iOS 6, touchscreen, 1.2GHz
    7.599.000 6 Produk/5 Website
  
  

    
    
BlackBerry Curve 9360 (Apollo)
    
GSM, GPS, WiFi, kamera 5MP, bluetooth, 800MHz
    225.000 9 Produk/4 Website