I have grid that looks like this:
with the css:
display: grid;
float: left;
gap: 18px;
grid-template-columns: repeat(2, 1fr);
margin-top: 10px;
Is there a way to shorten the distance between Text1 and the start of Text2 long bla...?
(using the grid css and not matgin: -12px for example)
It seems like the distance between them is the width of Text2 long bla... (which is the longest element here)?
thank you!
Using repeat(2, 1fr) will divide the container into 2 equal parts. So if you want to lower the distance between them, you should change your containers width.
.firstContainer {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 300px;
border: 1px solid red;
}
.secondContainer {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 200px;
border: 1px solid green;
}
<section class="firstContainer">
<span>Hello</span>
<span>, World!</span>
</section>
<section class="secondContainer">
<span>Hello</span>
<span>, World!</span>
</section>
Related
<div class="container">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
.wrapper {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
align-items: space-around;
min-width: 300px;
height: 70vh;
background: whitesmoke;
}
#media screen and (min-width: 1100px) {
.container {
height: auto;
display: grid;
grid-template-columns: 1fr repeat(2, minmax(auto, 30rem)) 1fr;
background: pink;
}
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column: 2/4;
justify-content: center;
background: cyan;
}
}
I've created a column that contains three circles in it, each stacked on top of the other in a column, which all looks fine when the screen is narrow. But when the browser is widened and I add a media query for when the screen gets wider than 1100px, I want the column of circles to flip to become a single row of circles.
But when I do this using CSS Grid, it doesn't work, and two circles appear on one row, and the third circle appears below the first circle on a second row. You can see it at https://codepen.io/HorrieGrump/pen/ZEKxJgv
I can get it to work if I use flexbox instead (as shown below) by swapping out the current .wrapper block in CSS and using this new one with flexbox, but I'd like to know if it's possible to use CSS Grid instead of flexbox to do this.
Can someone please let me know how to get the media query to flip the column into a single row using CSS Grid – and not have to resort to flexbox?
.wrapper {
display: flex;
flex-direction: row;
grid-template-columns: repeat(2,1fr);
justify-content: space-around;
align-items: center;
grid-column: 2/4;
background: cyan;
}
Edit your media query for .wrapper
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
grid-column: 2/4;
background: cyan;
}
I have a grid that works great:
.grid {
display: grid;
height: 100vh;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
padding: 10px;
}
.card {
border: 2px solid #000;
}
<div class="grid">
<div class="card">Lots and lots and lots of text...</div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
In this example, I have the page divided into 4, with all divs the same size. As the text gets longer in the first card, it expands, pushing the other cards down (making them smaller) before ultimately pushing them off the page, increasing the height of the div.
https://codepen.io/EightArmsHQ/pen/641b47d9bbc7a13880a53b0da04bd3bb
If I wrap this another div
.wrap {
height: 100vh;
display: grid;
grid-template-rows: 20vh 1fr;
}
.grid {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
padding: 10px;
}
.card {
border: 2px solid #000;
}
<div class="wrap">
<div class="controls">
<h1>Text here.</h1>
</div>
<div class="grid">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
Then the .grid rows all match each others height. Which is cool, but not what I want in this scenario. How can I make them behave similarly to the previous example?
Incorrect behaviour:
https://codepen.io/EightArmsHQ/pen/5637d435b48628aa5f31d5b996bbc6bf
The 1fr in grid-template-rows: 20vh 1fr; makes the second grid take up the rest of the available space after your controls div. That space then gets equally divided in four quarters by the CSS settings of your second grid:
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
Simply remove the grid-template-rows style from your second grid so the grid row height is set to auto.
.wrap{
height: 100vh;
display: grid;
grid-template-rows: 20vh 1fr;
}
.grid{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
padding: 10px;
}
.card{
border: 2px solid #000;
}
I have a jsfiddle.
What I have:
What I want:
Problem:
The hopefully relevant section is:
grid-template-columns: repeat(auto-fit, 1fr);
where both elements in my section have width: max-content;.
This (and the expanded but technically identical form of repeat(auto-fit, minmax(auto, 1fr));) do not do what I expect - it creates picture 1, I expect it to look like picture 2. It looks like the minimum width for these elements is too large, so instead of being on one row, it puts them in columns.
I made picture 2 by changing the code to repeat(auto-fit, minmax(200px, 1fr));. This is not a great solution as I want the minimum element size to be based on the grid elements' widths, not some arbitrary value.
I do want to have the elements able to be on different rows (for instance, if the browser is very narrow), so CSS grid seems useful for this task. I'm obviously just misunderstanding some key aspect.
Question
What value can I use in my grid-template-columns to make my elements work the way I expect with CSS grid? Is there a way to do it with repeat(auto-fit, X); or do I have to specify the number?
Answer
As stated below, you cannot use repeat(auto-fit with fr as it does not specify an absolute minimum or maximum, which the spec says is invalid.
Michael_B gave the answer (in his jdfiddle example comment) of using
display: flex;
flex-wrap: wrap;
which does exactly what I expected repeat(auto-fit, 1fr); to do.
This rule won't work.
grid-template-columns: repeat(auto-fit, 1fr)
The problem is explained here: minmax fails (invalid property value)
This rule won't work:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
The problem is explained here: minmax() defaulting to max
You can use min-content
.page-container {
display: grid;
grid-gap: 0.5rem;
grid-template-columns: 20% 80%;
grid-template-rows: auto auto 20rem;
grid-template-areas: "header header" "sidebar content" "footer footer";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 25px;
padding: 50px;
}
.header {
grid-area: header;
display: grid;
grid-template-columns: repeat(2, min-content);
grid-gap: 10px;
}
.header>* {
background-color: lightgreen;
}
.header a:link {
color: inherit;
text-decoration: none;
}
.header a:hover {
/* https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 */
text-decoration: underline;
}
.header h1,
h2 {
margin: 0;
width: max-content;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
<div class="page-container">
<section class="box header">
<h1><a href="https://jeremy.richards.dev">
Jeremy.Richards.dev
</a></h1>
<h2>
and this on the
</h2>
</section>
<div class="box sidebar">
Sidebar
</div>
<div class="box content">
Content
</div>
<div class="box footer">
<h2 style="font-size: 2rem;">
Something
</h2>
<h3 style="font-size: 1.5rem;">
My name underneath
</h3>
<p>
Linkedin/github/SO
</p>
</div>
</div>
I'm trying to use CSS grid to vertically and horizontally center some text in a header/title area, and have that area (and the whole layout) be somewhat flexible/responsive.
I've set up a simple example in this code pen, but if you don't want to head over there, the HTML and CSS in the example are this:
<div class='layout'>
<div class='titleArea'>
<svg viewBox='0 0 100 100' preserveAspectRatio='xMidYMid meet'>
<text x='50%' y='60%' textAnchor='middle' dy='0.07em' class='titleText'>
Hello World
</text>
</svg>
</div>
<div class='mainArea'>
</div>
</div>
and this:
.layout {
height: 400px;
border: 1px solid red;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: minmax(80px, 1fr) minmax(200px, 3fr);
grid-template-columns: 1fr;
grid-template-rows: minmax(80px, 1fr) minmax(200px, 3fr);
}
.titleArea {
border: 1px solid blue;
width: 100%;
-ms-grid-row: 1;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
svg {
height: 100%;
width: 100%;
/* uncomment line below to see text centering work in Edge */
/* max-height: 80px; */
justify-self: center;
align-self: center;
-ms-grid-column: 1;
-ms-grid-row: 1;
}
}
.titleText {
font-size: 2.5em;
}
.mainArea {
border: 1px solid green;
}
The centering and flexing don't quite work in the pen, but it's pretty close, and certainly if viewed in Edge the problem becomes readily apparent.
If I open some dev tools and go and look at what's happening, the height: 100% is getting calculated not as the height of the parent container, but matches what's calculated for the width: 100%, which makes the text render huge and it completely breaks out of the parent container. If I set a max-height value to something within the range of what I expect the flexing to be, it reins everything in and the text ends up where it should, but then it's frozen at that size and doesn't subtly shrink/grow as the viewport changes.
Is there some workaround for this, or is this a legitimate bug in Edge?
The above setup works just fine in Chrome, Firefox, and even IE 11, the issue is only with Edge.
I have reproduced this problem on my machine, it seems that the issue is related to the SVG element's x and y attribute, it will set the starting point of the text baseline based on the whole page, instead of the SVG element. It can be possible that it is some kind of bug or it is Edge default behavior. I will try to submit the feedback regarding this issue.
As a workaround, I suggest you could try to change the CSS units, such as 'px'. And you could modify your code as below:
<style>
.layout {
height: 400px;
border: 1px solid red;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: minmax(80px, 1fr) minmax(200px, 3fr);
grid-template-columns: 1fr;
grid-template-rows: minmax(80px, 1fr) minmax(200px, 3fr);
}
.titleArea {
border: 1px solid blue;
width: 100%;
-ms-grid-row: 1;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
text-align: center;
}
.titleArea svg {
height: 100%;
width: 100%;
/* uncomment line below to see text centering work in Edge */
/* max-height: 80px; */
justify-self: center;
align-self: center;
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.titleText {
font-size: 20px;
}
.mainArea {
border: 1px solid green;
}
</style>
<div class='layout'>
<div class='titleArea'>
<svg width="100%" height="100" preserveAspectRatio='xMidYMid meet'>
<text x='50%' y='50' textAnchor='middle' dy='0.07em' class='titleText'>
Hello World
</text>
</svg>
</div>
<div class='mainArea'>
</div>
</div>
The result as below (using Microsoft Edge 44.18362.387.0 version):
I'm setting up a page that has details of company employees. my problem is that i tried giving my grid items a "grid area" style attribute so that i can use the "grid name" when defining my grid template areas for my container. but suddenly my items disappear. Please what do i need to do to fix the problem ?
.container{
border-right: 2px solid grey;
border-left: 2px solid grey;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
justify-items: center;
margin-top: 100px;
grid-template-areas {
"head head head"
" . side ."
"foot foot foot";
}
}
.grid-1{
display: grid;
grid-area: head;
}
.grid-2{
display: grid;
grid-area: side;
}
.grid-3{
display: grid;
grid-area: foot;
}
i expect the output of my grid to still show irrespective of the "grid-area" style attribute used but it disappears.
Your syntax for grid-template-areas is incorrect. The value should not be wrapped with curly braces, instead it should look like this:
.container{
height: 400px;
width: 400px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas: "head head head"
" . side ."
"foot foot foot";
}
.grid-1{
display: grid;
grid-area: head;
background-color: pink;
}
.grid-2{
display: grid;
grid-area: side;
background-color: blue;
}
.grid-3{
display: grid;
grid-area: foot;
background-color: green;
}
<div class="container">
<div class="grid-1">Header</div>
<div class="grid-2">Side</div>
<div class="grid-3">Footer</div>
</div>
Looking at this documentation, I see a segment which says:
To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.
I see your use of grid-template-columns but none of grid-template-rows. Changing .container to include grid-template-rows may help, something like this (for three rows):
.container{
border-right: 2px solid grey;
border-left: 2px solid grey;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
justify-items: center;
margin-top: 100px;
grid-template-areas: "head head head"
" . side ."
"foot foot foot";
}
Seems to be working by fixing the typo in grid-template-areas and defining grid-auto-rows. I'd suggest looking into some other CSS property that might be causing the issue since what you provided works pretty well with minor fixes.
.container {
border-right: 2px solid grey;
border-left: 2px solid grey;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
justify-content: center;
grid-template-areas: "head head head" ". side ." "foot foot foot";
}
.grid-item {
border: 1px solid black;
}
.grid-1 {
grid-area: head;
display: grid;
}
.grid-2 {
grid-area: side;
display: grid;
}
.grid-3 {
grid-area: foot;
display: grid;
}
<div class="container">
<div class="grid-item grid-1">Head</div>
<div class="grid-item grid-2">Side</div>
<div class="grid-item grid-3">Foot</div>
</div>