Search code examples
htmlcsscss-grid

CSS Grid Styling

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>
Solution

  • 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.