css-grid

问题 I know there are similar questions but this is specifically asking how to do this using CSS Grid Layout. So we have this basic grid setup: HTML (with sidebar): <div class="grid"> <div class="content"> <p>content</p> </div> <div class="sidebar"> <p>sidebar</p> </div> </div> CSS: .grid { display: grid; grid-template-columns: 1fr 200px; } To create a layout that looks something like this: | content | sidebar | If the page doesn't have a sidebar though, ie. the html looks like this but with the

问题 I have a flex-box problem. Can anyone point me in the right direction? It might even be that flex-box cannot solve this situation because of the way it works. I want to display content across 4 columns. Have the content be listed in a columnar format and wrap to the next column when running out of room. display: flex; flex-direction: column; flex-wrap: wrap; height:<##>px should take care of this. But this is where things get tricky. What if I don't want a fixed height, but one that grows

问题 I have a flex-box problem. Can anyone point me in the right direction? It might even be that flex-box cannot solve this situation because of the way it works. I want to display content across 4 columns. Have the content be listed in a columnar format and wrap to the next column when running out of room. display: flex; flex-direction: column; flex-wrap: wrap; height:<##>px should take care of this. But this is where things get tricky. What if I don't want a fixed height, but one that grows

问题 This question already has answers here : A grid layout with responsive squares (3 answers) Closed 7 months ago . I am trying to create grid/layout consists of squares. Four squares in each row. Squares can't distort on screen resize. Width and height must be the same all the time (I don't want fixed values). I must use CSS grid. Can anyone help me ? .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 5px; } .container div { background-color: red; } <div class=

问题 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:

问题 I would like to achieve a grid effect in CSS with elements that all have the same width in size but not in height. I would like the element underneath to be always at 50px of the bottom one, whatever is next. I tried with floats, but that bug. So I tried with Flex, but it still does not do what I want. .container display: flex flex-wrap wrap align-content flex-start align-items flex-start What I would like: What I have: 回答1: Try the new CSS Grid Layout: grid-container { display: grid; /* 1 */

问题 I'm trying to position a nested li ( ul li ul li ) on a CSS Grid created on the top-most ul . No love yet (it's not working). Maybe it's not possible, or I'm missing something? #orgChart ul.orgChartLevel1 { display: grid; grid-template-columns: 12px auto; grid-template-rows: 100px auto auto; grid-row-gap: 30px; } #orgChart li.orgChartLevel2b { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; } <ul class="orgChartLevel1"> <li class="orgChartLevel1a"> <ul class=

问题 I am practicing auto-fill property with rows, however, it is not doing what I desire. I want to create rows with height minmax(140px, 200px) , but instead get one row with 200px height and the rest are 18px. Why is it happening? body, html { height: 100%; margin: 0; } .wrapper { display: grid; grid-template-rows: repeat(auto-fill, minmax(140px, 200px)); } .wrapper>div:nth-child(odd) { background-color: red; } <div class="wrapper"> <div class="one"> 1 </div> <div class="one"> 1 </div> <div

问题 What CSS properties should I set so that the columns will wrap underneath one another, ignoring the height of horizontally-adjacent columns? Unsuccessful attempt I'm attempting to do this with display: grid , but it doesn't behave how I want. An example: header { height: 2.0rem; background: PeachPuff; } footer { height: 2.0rem; background: PaleGreen; } header, footer, section.app-column { padding: 1.0rem; } section#main section#app-column-primary { grid-area: primary; height: 5.0rem;

问题 I'm trying to build a layout like this one with flexbox: how can I stack the items on top of one another? I build what's on the above screenshot using CSS grid, but failing to do this with flexbox. .grid { display: grid; height: 100%; grid-template-columns: 2rem repeat(2, auto) 2rem; grid-template-rows: 4rem 4rem auto; background-color: #fff; } .layer1 { background-color: rgb(64, 213, 187); grid-column-start: 1; grid-column-end: span 3; grid-row-start: 1; grid-row-end: span 3; } 回答1: NOTE: