css-grid

问题 I have the parent element set to newTableForm with labelColumn and mainFormColumn as children - but with the current CSS everything collapses into one row: .newTableForm { display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: 30px 30px 30px 40px; grid-gap: 10px; grid-template-areas: "... main" "labels main" "labels main" "... main"; border: 2px dashed deeppink; } .labelColumn { grid-area: labels; } .mainFormColumn { grid-area: main; } <form method='post' action="/admin-post.php"

问题 I have a CSS grid that represents the tic-tac-toe game. I wanted to put an border only inside the grid. Today, I proceed in this way: :root { --border: 2px dashed #393939; --symbol-color: #FF7F5B; } .grid { height: 100%; display: grid; grid-template-columns: repeat(3, calc(100%/3)); grid-template-rows: repeat(3, calc(100%/3)); } .child { display: flex; align-items: center; align-content: center; color: var(--symbol-color); font-size: 2.5rem; } .child:nth-child(1), .child:nth-child(2), .child

问题 This question already has answers here : Prevent content from expanding grid items (3 answers) Closed 2 years ago . word-wrap: break-word doesn't work in a grid. For tables there is table-layout: fixed , what is the equivalent for grids? <div style="background: #e3e3e3; width: 75%;"> <div style="word-wrap: break-word;"> normaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldiv </div> <table> <tr><td style="word-wrap: break-word;">

问题 I am trying to put some divs in a grid by explicitly assigning rows, columns, and sizes to the elements and allowing CSS grid to do column and row sizing work using the following CSS. display: grid; grid-auto-columns: min-content; The value min-content is supposed to set columns to be the smallest possible size that fits the content without overflow. However, this is not happening. Even though these elements can all fit in a 350px grid, the third column is too large causing unnecessary

问题 I'm trying to replicate this design using HTML/CSS for modern browser: It's essentially a table, with rows and columns, that means if the name cell for a row becomes bigger, it should become bigger for all of them. I see two possibilities: tables and CSS grid. Rows in tables, as far as I can see, are not stylable enough, they can't take a border radius for example, I haven't tried box shadow. If I use a CSS grid, I can style the cells to simulate border radius at the end, but then the box

问题 So I'm pretty new to grid layout and I was stuck at the following problem. What I got so far is this: codepen And here's the relevant grid part: grid-template: 'img date' 'img head' 'img sub' 'desc desc'; grid-template-rows: auto auto 1fr 1fr; Now my problem is that the date, head and sub all take up equal space, but what I want is for date and head to take up the minimum available space, i.e. "stick to the top". I managed to do that by giving the first two rows fixed heights like so grid

问题 I'm a student trying to understand css grids. How do I change the size of a specific div column or row without changing them all and insert elements such as pictures etc into the grid? I have attempted it here: https://codepen.io/lukeheald/pen/bYQNgj If I target the specific div I want to adjust it changes the height of all of them. body{ font-family: 'Anton', sans-serif; margin: 0; } /* Main sidebar style, dark background and transition.*/ #sidebar{ background: black; width: 200px; height:

问题 Using css-grid I have setup a 24 column grid inside of container that is 1002px wide. Inside the container div, there is a child div that spans 21 columns. The width of I am expecting of the child div is: 21/24 * 1002 = 876.75 When a grid-gap property is added, the width of the column decreases to 873px, which is not desired. How can I write my CSS so that the width of the div is 876.75px? See example: https://codepen.io/edtalmadge/pen/MvLrqW?editors=1100 HTML <div class="container1"> <div

问题 I am using padding-top to force the aspect ratio of a div to 16:9. The contents of the div are positioned absolutely and expand to fill the div. HTML: <div class = "ratio-16-9"> <p>This p element is in a div with an aspect ratio of 16:9.</p> </div> CSS: .ratio-16-9 { padding-top:56.25% /* Yields 16:9 aspect ratio. */; position:relative; } .ratio-16-9 > p { position:absolute; left:0; top:0; width:100%; height:100%; } It works nicely to achieve the aspect ratio, but the div is overflowing my

问题 I'd like the CONTENT flex column to wrap around the left-hand rowChild592 column. I have this: I'd like it to look something like this: I saw an answer here about making a div set to a table cell wrap around: Wrapping table content around a floating div across multiple rows Would I have to redo all of this with a table, or is it possible to wrap a flex column around another? .rowParent, .columnParent { display: flex; } .columnParent { flex-direction: column; } .flexChild { flex: 1; }