css-grid

Is there a way, without using media query , to limit the number of columns that get created, and combine that with auto-fit/fill? For example: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); Creates a wonderful, responsive layout. But imagine the design calls for a maximum of 3 columns -- even in wide browsers. It would happily show, 4, 5, more columns as space allows. Using media query, I could specify big screens get: grid-template-columns: 1fr 1fr 1fr; And smaller screens get: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); But that feels wrong. Is there a way to

I just noticed some values of the align-self property that I haven't seen before. What are start , end , self-start , and self-end and what are their differences from flex-start and flex-end ? I've been referring to the guide at CSS-Tricks often when I work with flexbox, but it doesn't mention these values. I read the documentation for align-self at MDN, but the one-line description of the values isn't enough for me to understand. I thought I might be able to play around with the values to figure it out, but they all seem to do the same thing... .container { display: flex; justify-content:

I'm having fun getting my head around the new CSS Grid spec, but I'm running into trouble with borders. Is it possible to collapse borders in a CSS Grid, or is there any way to style the gutter? As you can see in the snippet below, the 10px borders stack ( 20px total) in-between blocks. I understand this issue isn't unique to CSS Grids, but I'm hoping it'll allow for new solutions for creating a uniform 10px border between all boxes and on the outer edges. My actual use-case is a calendar I'm making to practice working with Grids and React components. You can see the issue I'm running into

It doesn't work properly when I add auto-fit or auto-fill instead of a number. grid-template-columns: repeat(auto-fit, minmax(max-content, max-content)); But it works properly when I add number instead of max-content. grid-template-columns: repeat(auto-fit, minmax(50px, max-content)); But I want the size of the grid to be the same(be fit) as the size of the content. Like this: grid-template-columns: repeat(30, minmax(max-content, max-content)); (using auto-fit or auto-fill). How can I do that? * { margin: 0; padding: 0; box-sizing: border-box; } ul { display: grid; grid-template-columns: