css-grid

问题 On my remote server and localhost, the scrollbar attached to my container with overflow-scroll seems to have a margin on the right which is causing the background color to show through. Here - on code snippet - the code is identical but there is no such margin. EDIT : behavior expanded upon When the browser is resized, the background color flashes in and out to the right of the scrollbar as the element resizes. Furthermore, when the mouse is released at a window width wherein the background

问题 On my remote server and localhost, the scrollbar attached to my container with overflow-scroll seems to have a margin on the right which is causing the background color to show through. Here - on code snippet - the code is identical but there is no such margin. EDIT : behavior expanded upon When the browser is resized, the background color flashes in and out to the right of the scrollbar as the element resizes. Furthermore, when the mouse is released at a window width wherein the background

问题 I want my grid to maintain a certain ratio, but a long sentence increases the width of the grid it belongs to. body { display: grid; } main { grid-column: 1 / 8; border: 2px solid black; } aside { grid-column: 8 / 13; border: 2px solid black; } <main> <p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt

问题 I'm trying to create a table using CSS grid, with equal columns based on the content. I want to avoid using <table> . This is a follow-up to this question: Auto-adjusting columns with CSS grid What I'm trying to achieve: This table works: https://codepen.io/anon/pen/baExYw But I want to wrap the each row in a div , which unsurprisingly breaks the table. This table is broken: https://codepen.io/anon/pen/qpbMgG app.html <div class="wrapper"> <div class="box a">col 1</div> <div class="box b">col

问题 I'm trying to create a table using CSS grid, with equal columns based on the content. I want to avoid using <table> . This is a follow-up to this question: Auto-adjusting columns with CSS grid What I'm trying to achieve: This table works: https://codepen.io/anon/pen/baExYw But I want to wrap the each row in a div , which unsurprisingly breaks the table. This table is broken: https://codepen.io/anon/pen/qpbMgG app.html <div class="wrapper"> <div class="box a">col 1</div> <div class="box b">col

问题 Why do I have an overflow on the X axis in the following snippet? The overflow is generated once I apply grid-gap: 10px on my .body grid container. div:not(.header):not(.body):not(.row) { border: 1px solid grey; } .header { margin-top: 20px; display: grid; grid-gap: 10px; grid-template-areas: "header-left header-right-up" "header-left header-right-down"; grid-template-rows: 40px 40px; grid-template-columns: minmax(50px, 200px) auto; } .header-left { grid-area: header-left; } .header-right-up

问题 I'm trying to do a responsive layout with css grid by getting two elements to overlap each other halfway. On wide screens they are in one row and overlapping horizontally, but on narrow screens they should be in one column and overlap vertically. Here is an illustration of what I'm trying to achieve: Is this behavior possible with css grid? Here is how far I got but now I'm stuck trying to get the vertical overlap. CSS .wrapper { background: white; display: grid; grid-template-columns: repeat

问题 While using the old CSS grid spec that is supported by IE 11 and EDGE. Is it possible for the grid items to be auto placed like the current spec? i.e. to not have to define the column on a grid item: .item:nth-child(1) { -ms-grid-column: 1; } .item:nth-child(2) { -ms-grid-column: 2; } .item:nth-child(n) { -ms-grid-column: n; } https://codepen.io/JoeHastings/pen/mMPoqB 回答1: The answer is NO (unfortunately). Old specs section about auto-placement has such preamble This section describes early

问题 This a table that created with CSS Grid Layout, but I have a problem with it, I can't make hover state on each row. I only want use CSS for this. Can anyone give me a solution for this? .table { display: grid; grid-template-columns: [col-start] auto [col-end]; grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end]; grid-auto-rows: auto; grid-auto-columns: auto; grid-gap: 1px; } .table>* { background: gray; padding: 10px; } .heading { background: navy; color: #fff; grid

问题 I want separate scroll on each of my columns in my grid layout. Currently, I am developing a mobile only web application. I want to use a different grid layout for the portrait and landscape orientations. The portrait orientation is just 1 column and every element is after the other. No problem here. In the landscape orientation I want to use 2 columns. My whole content is displayed on the left side and my navigation moves to the right side. Now I want both parts to have a separate scroll. Is