CODEWITHSUNDEEP
cssgridcss-grid
sathishkumar
sathishkumar

Reputation: 1816

how to set child width 10% of parent width in css grid

Creating 10 x 10 grid in css grid.

parent element (which has display grid) is not having width. based on its parent width it will expand or width 100%.

Need to set 10% width of parent for a single child.

I want to set height and width for this all 100 child evenly, so that it can expand and show a svg inside the child item in css grid.

Upvotes: 0

Views: 2227

Answers (1)

Rahul Singh
Rahul Singh

Reputation: 76

You can divide your parent element into 10 columns of equal size by using the following code. When the width of parent changes, the width of each child will also relatively change.

.parent {
    display: grid;
    grid-template-columns: repeat(10, 1fr); //Break this div into 10 columns of equal size
}

.child {
    width: 100%;
}

Upvotes: 1

Related Questions