
Hello fellow devs, recently I've decided to make a custom sheet for my fellow players; I'm well aware of what type of dedication and time consuming this means so I'm here wtih my first humble noobish question on CSS grids.
I've read the community wiki and the CSS guide linked on CSStricks.
Spent the whole afternoon and evening trying to figure out a simple task but I'm repeatdly failing at every approach.
I'm starting with something terribly simple, the name and gender of charachter forms input, this image shows my objective:
I want to recreate the same ratio in the CSS grid for each element, but everything seems to fail each time I try to set the elements in the grid cells.
I wont report here every approach I've tried( even flex displays and grid of grids) but let's start from this simpliest sample of my code:
.info-grid{ display: grid; grid: 50px / 1fr 1fr 1fr 1fr; grid-gap: 3px; grid-auto-flow: row; } .info-grid-item{ padding: 1px; place-self: center; border: 1px solid black; }
<section class="info-grid"> <label class="info-grid-item">NAME</label> <input class="info-grid-item" type="text" name="attr_name" value=""> <label class="info-grid-item">GENDER</label> <input class="info-grid-item" type="text" name="attr_gender" value=""> </section>
Obatining this result in the sheet sandbox:
Labels seems to behave the worst in the grid cells, to shrink them I have to shrink the entire colum, and every element seems to "exceed" the cell dimension and overflow into the others ( that's why I enabled the borders) and nobody seems to behave to stay in the "center" of supposed cell.
I'm kinda at loss, if anybody want to give me any advice on how to correctly approach such simple use case it would be great.
Thank you for your attention.