css-grid

I am trying to get my sticky header to have a transition effect so it eases in rather than just a snap movement. What am I doing wrong? Here's my a working version: http://codepen.io/juanmata/pen/RVMbmr Basically the following code adds the class tiny to my wrapper class, this works fine. $(window).on('load', function() { $(window).on("scroll touchmove", function () { $('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0); }); }); Here's the CSS part: .wrapper { grid-template-rows: 80px calc(75vh - 80px) 25vh 80px; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition:

Given the current CSS grid example, how can I collapse the borders in order to avoid the double borders ? This is such a simple thing to achieve using an Html table. How do I do it using display: grid ? .wrapper { display: grid; grid-template-columns: 50px 50px 50px 50px; } .wrapper > div { padding: 15px; text-align: center; border: 1px solid black; } <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> You may do like this : .wrapper { display: inline-grid; grid-template-columns: 50px 50px 50px 50px; border-bottom

Wanted : a CSS only solution to enable MULTIPLE equal height grid "sections" on a per row basis, that is also responsive. Note: this is a follow-up question to this question which has only a single "equal height" section per item - which can be achieved through flexbox The below diagram should help explain the requirement: The "item grid" should be responsive - in that it can show a different number of cards per row based on viewport width (4 on desktop, 2 on mobile). Within a given row, the equivalent "content" and "feature" sections should have the same height. In the below HTML & CSS - the

It is wildly highlighted that Flexbox is for 1-D and Grid for 2-D but I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox. The closest I came to is But you could also argue that purely 1D layout like this is more powerful in Flexbox, because Flexbox allows us to move those elements around easier (e.g. move them all to one side or another, change their order, space them out evenly, etc). I use Grid and Flexbox for basic layout: a general placement of the boxes on the page and some dynamic ones, usually stacked. The esthetical ones (toasters, modals, ...)

I am wanting to create a grid layout with responsive squares. I feel like I should be able to do this with CSS Grid layout but having trouble setting the height of each square to be equal to the width. Also having trouble setting a gutter between each square. Would I be better off using flexbox? Currently my HTML looks like this but will be dynamic so more squares may be added. And of course it needs to be responsive so will ideally use a media query to collapse it to one column. <div class="square-container"> <div class="square"> <div class="content"> </div> </div> <div class="square"> <div