CSS Grid Styling

user_13214121 0
Viewed 137

I am trying to understand how CSS grids work. I've tried to make an example of a store item as practice, but I am at a loss.

Here's my how my CSS currently looks. Cut off at the top, weird spacing, and the right side is not coming together at all.

enter image description here

How's how it would ideally look

enter image description here

Here is my current CSS, I hope someone can help explain where I am misunderstanding the use of CSS grids.

.store-currency {
    height: 3vh;
}

.item {
    display: flex;
    align-items: center;
    grid-row: 1 / span 2;

}

.currency {
    display: flex;
    align-items: center;

}

#num-bought-item0 {
    display: flex;
    align-items: center;
    justify-content: right;
    margin-right: 10px;
    grid-column: 1 / span 2;
}

.store-item {
    height: 15vh;
    width: 100%;
    display: grid;
    grid-template-columns: 2fr;
    grid-template-rows: 1fr 1fr;
    font-size: 24px;
    color: white;
    border: 5px white solid;
    justify-content: left;
    align-items: center;
}

.store-item img {
    margin: 10px;
    height: 8vh;
}


.store-container {
    display: flex;
    height: 100%;
    width: 30vw;
    z-index: 0;
    background-color: saddlebrown;
    left: 0;
    position: absolute;
    text-align: center;
}

HTML:

 <div class="store-container">
        <div class="store-item" id="item0">
            <div class ="item">
                <img src="dumbell.png" alt="">
                <span>Dumbbell</span>
            </div>
            <div id="num-bought-item0">
                <span>Owned</span>
                <span id="count-item0">0</span>
            </div>
            <div class="currency">
                <img class="store-currency" src="coin.png" alt="">
                <span>100000</span>
            </div>
    </div>
css-grid css html
2 Answers

you did the first steps.

To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.

.store-container {
  display: grid | inline-grid;
}
  • grid – generates a block-level grid
  • inline-grid – generates an inline-level grid

With grid-template-columns you can define how many columns will appear in your layout. P.S Fr unit is a fractional unit and 1fr is for 1 part of the available space. In this example each column would take ~ 25% from the available space.

.container {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

For your task, you can use grid-template-areas feature.

The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

For example:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

This will generates something like that in modern browsers: grid-template-area

If you need more examples, take a look here: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas https://css-tricks.com/snippets/css/complete-guide-grid/ Some of the examples are taken from the second site.

user_78406550

It looks like you are mixing flex and grid properties. grid-row and grid-column are only avalaible for a grid display (2D), not a flex display (1D).

You can try to play around with flex (worse choice since it is drawing a 1D layout) , you can use grid , which is made for this kind of layout. Here a couple example with flex and grid

/* GRID make it simple*/
.grid {display:grid;}
#num-bought-item2 {grid-row:1/3;grid-column:2;}
#num-bought-item2 {display:grid;margin:auto;text-align:center}
/* layout done */

/* some reset for the demo*/
*{box-sizing:border-box;}
.store-container {display:grid;justify-content:center;}
.store-item {border:solid;}
.store-item>div {padding:0.5em;}
img{vertical-align:middle;}
[src="https://dummyimage.com/25/ff0"]{border-radius:50%}
big{color:darkgreen;background:lightyellow;}

/* FLEX make it a mess */
.flex {display:flex}
.column {flex-flow:column wrap;height:120px;}/* here an height is to be set so it wraps*/

/* since it is not made for this, we need to mess around */
.flex #num-bought-item1{order:2}/* reorder item */
.flex .item {height:0;min-height:60%;}/* hide it, then show it */
.flex .currency {height:0;min-height:40%;}/* hide it, then show it */
.flex #num-bought-item1{display:flex;flex-direction:column;justify-content:center;text-align:center;margin:auto;}
/* and flex did not do it */
  <p>Let's try via flex</p>
  <div class="store-container">
  <div class="store-item flex column" id="item1">
    <div class="item">
      <img src="https://dummyimage.com/50" alt="">
      <span>Dumbbell</span>
    </div>
    <div id="num-bought-item1" >
      <span>Owned</span>
      <span id="count-item1">0</span>
    </div>
    <div class="currency">
      <img class="store-currency" src="https://dummyimage.com/25/ff0" alt="">
      <span>100000</span>
    </div>
  </div>
</div>
<p>And via <big>grid</big> </p>
<div class="store-container">
  <div class="store-item grid" id="item2">
    <div class="item">
      <img src="https://dummyimage.com/50" alt="">
      <span>Dumbbell</span>
    </div>
    <div id="num-bought-item2" >
      <span>Owned</span>
      <span id="count-item1">0</span>
    </div>
    <div class="currency">
      <img class="store-currency" src="https://dummyimage.com/25/ff0" alt="">
      <span>100000</span>
    </div>
  </div>
</div>

user_24420990
Related