I am using CSS grid for a website, and in the information section I have 2 columns:
on the left a paragraph with information, on the right the image.
However, when I want to add an h1 to the paragraph it creates an extra column, resulting in:
On the left the header, on the right the image and underneath the header is now the paragraph.
I've now avoided the problem by using and making a class for the first sentence of the paragraph (making that sentence look like a h1) but it feels like a makeshift solution. Is there a better way to solve this problem?
I've tried 2fr 2fr, still the same problem
I've added a screenshot of what it looks like
(I'm still very new to CSS grid)
.block1{
display:grid;
grid-template-columns: 1fr 2fr;
column-gap: 250px;
background-color: #EFEDE3;
padding: 150px;
}
.block1 img{
justify-self: end;
border-radius: 5px;
width: 75%;
}
.block1 span {
font-weight: bolder;
font-size: 32px;
}
You can try this one.
HTML:
<div class="grid">
<div class="paragraph">
<h1>Paragraph</h1>
</div>
<div class="imageBox">
</div>
</div>
and CSS:
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
column-gap: 250px;
}
.paragraph {
border: 1px solid green;
height: 40vh;
}
.imageBox {
border: 1px solid red;
height: 40vh;
}
Related
The image is an img tag and needs to be stretched as a background image over two areas 'img' and 'content'. The text has to go above the stretched image in the 'content' area. Simple but how? I can't find any obvious answers online.
.media {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
width: 100%
}
.media {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "img content";
margin-bottom: 1em;
}
.image {
grid-area: img;
background-color: #ffd8a8;
}
.text {
grid-area: content;
padding: 10px;
}
<div class="media">
<img class="image" src="https://loremflickr.com/500/200" />
<div class="text">This is a media object example.
We can use grid-template-areas to switch around the image and text part of the media object.
</div>
</div>
Modify your code as follows:
.media {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
width: 100%
}
.media {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "img content";
margin-bottom: 1em;
}
.image {
grid-area: img;
background-color: #ffd8a8;
}
.text {
grid-area: content;
padding: 10px;
}
.media {
background-image: url("https://loremflickr.com/700/200");
background-repeat: no-repeat;
height: 150px;
}
<div class="media">
<div class="text">This is a media object example. We can use grid-template-areas to switch around the image and text part of the media object.
</div>
</div>
Here is a screenshot of the output:
There are many ways to get the desired result.
You could also make the image a background of the DIV rather than having an IMG tag inside the DIV.
But I sticked to your code below and just added CSS to place the text DIV on top of the image and stretch the image to 100% with hidden overflow.
.media {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
width: 100% display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "img content";
margin-bottom: 1em;
overflow: hidden;
}
.image {
grid-area: img;
background-color: #ffd8a8;
width: 100%;
float: left;
}
.text {
grid-area: content;
padding: 10px;
position: absolute;
top: 10px;
left: 10px;
color: white;
text-shadow: 1px 1px 2px black;
box-sizing: border-box;
}
<div class="media">
<img class="image" src="https://loremflickr.com/500/200" />
<div class="text"><b>This is a media object example.
We can use grid-template-areas to switch around the image and text part of the media object.</b> </div>
</div>
I think, if there is just one part of the page at the background of the page, you should create a style. Then look at the backgammon tag select whatever you want,Later, the ID will have it in created anything on the page, for example
Panel, td, div,.... get it there.
You do not need to add any image.
Have you tried position: absolute on the text div?
I figured it out if anyone stumbles across it: (make sure you preview with full page)
#container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 100px;
grid-template-areas: "empty text" "mobile mobile";
}
#container img {
grid-column: 1 / span 2;
grid-row: 1 / span 1;
width: 100%;
overflow: hidden;
}
#container p {
grid-area: text;
color: red;
align-self: center;
justify-self: center;
z-index: 1;
}
#media (max-width: 768px) {
#container p {
grid-area: mobile;
color: red;
align-self: center;
justify-self: center;
z-index: 1;
}
}
<div id="container">
<img src="https://loremflickr.com/500/200">
<p>SOME TEXT OVER IMAGE</p>
</div>
I don't understand why DIV 3 is not the same size as DIV 1 + DIV 2.
https://codepen.io/anon/pen/vaVqPW
.grid {
display: grid;
grid-auto-columns: 1fr 1fr; /* I also tried 50% 50% */
grid-gap: 20px;
}
Firefox 61 should support css grid according to caniuse
https://caniuse.com/#feat=css-grid
* {
box-sizing: border-box;
}
.grid {
display: grid;
grid-auto-columns: 1fr 1fr;
grid-gap: 20px;
}
.content {
grid-column: 1;
background: red;
}
.sidebar {
grid-column: 2;
background: blue;
}
.grid>* {
/*border: 1px dashed red; */
/* demo only */
}
.box {
width: 50%;
height: 75px;
background-color: black;
color: #fff;
padding: 20px;
position: relative;
float: left;
}
.box100 {
width: 100%;
height: 75px;
color: #fff;
padding: 20px;
}
.box.arrow-left:after {
content: " ";
position: absolute;
left: -15px;
margin-top: -15px;
top: 50%;
border-top: 15px solid transparent;
border-right: 15px solid black;
border-left: none;
border-bottom: 15px solid transparent;
}
<div class="grid">
<div class="content">
<div class="box" style="background:gray">
DIV 1 (50% of column 1)
</div>
<div class="box arrow-left">
DIV 2 (50% of column 1)
</div>
</div>
<div class="sidebar">
<div class="box100">DIV 3 (100% of column 2)</div>
</div>
</div>
<div>
<div class="content" style="background:tomato">
<p>content 4 (100% of column 1 + GAP + 100% of column 2 )</p>
</div>
</div>
Firefox does indeed support CSS Grid (see caniuse.com).
The problem is that Firefox does not appear to support multiple values in grid-auto-columns.
This is your code in Chrome. No problems.
This is your code in Firefox. There's a problem. The code is invalid / not recognized.
It fails in Firefox here, too:
The grid-auto-columns property can take multiple values, per the spec definition. However, Firefox appears to lack support for this set-up. It only accepts a single value.
Your correction to the problem, as stated in your answer and copied below, is simply to switch from implicit columns (grid-auto-columns) to explicit columns (grid-template-columns).
grid: auto-flow dense / 1fr 1fr;
The grid property is a shorthand property that allows you to set all explicit and implicit rules in a single declaration. Your rule above breaks down to this:
So in the end, it appears that a simple switch from grid-auto-columns to grid-template-columns was all you needed.
grid: auto-flow dense / 1fr 1fr;
this seems to solve the Problem!
At the same time deleting the line:
grid-auto-columns: 1fr 1fr;
Pen is updated: https://codepen.io/anon/pen/vaVqPW
I'm using the new CSS grid layout, basically I'm displaying a series of images, which is fine with six columns, I've gotten that part down, but the content has a variable number, and often times there is not enough content to fill every column, so in the event that there's only say two items in the row, I'd like them to center in the middle two columns. This being a relatively new API though I haven't seen anything like this that I've managed to get working properly. Here is some sample CSS, please excuse my general ignorance if something looks horribly wrong.
#result-images{
display: grid;
grid-template-columns: 260px 260px 260px 260px 260px 260px;
grid-gap: 11px;
grid-column-gap:55px;
background-color: #959595;
border-style:solid;
border-width:3px;
border-color:#FFFFFF;
}
#result-images img{
width:100%;
height: 100%;
background-color: #363636;
display:block;
margin: 0 auto;
}
Flexbox is actually easier to use to achieve this output. Example below.
#result-images{
display:flex;
flex-flow: row wrap;
justify-content:center;
align-content:center;
align-items:center;
border: 2px solid black;
max-width:360px;
}
#result-images img{
min-width: 120px;
max-width: 120px;
min-height: 120px;
max-height: 120px;
flex: 0 1 auto
align-self:center;
}
<section id="result-images">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
</section>
List item
Center an image in the area
#result-images {
border: 2px solid #fffff;
border-radius: 5px;
background-color: #959595;
}
#result-images {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a a a ."
". a a a a .";
}
img {
grid-area: a;
align-self: center;
justify-self: center;
width: 100px;
height: 100px;
}
<div id="result-images">
<img src="https://c1.staticflickr.com/2/1018/805106121_ab84d1a216_b.jpg" />
</div>
use auto-fit with repeat()
in your case grid-template-columns: repeat(auto-fit, 260px)
I am trying to apply different gap between each grid element, for example we are having the following code. 4 Grid lines, 3 Elements and a 10px width between each grid-box. How can i apply custom width between each grid-box? for example 20px between element1 and element2, and then 30px between element2 and element3?
Can i achieve that with the css grids?
Edit: Without using padding.
Edit2: Provided Pictre.
Click for picture preview
html, body {height: 100%; margin: 0; padding: 0;}
body {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-row: 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
#element1 {
grid-column: 1/2;
grid-row: 1/2;
border: 1px solid #2e2e2e;
color: #000;
}
#element2 {
grid-column: 2/3;
grid-row: 1/2;
border: 1px solid #2e2e2e;
color: #000;
}
#element3 {
grid-column: 3/4;
grid-row: 1/2;
border: 1px solid #2e2e2e;
color: #000;
}
<div id="element1">element1</div>
<div id="element2">element2</div>
<div id="element3">element3</div>
Well the general approach that I like to use with css-grid is to make extra columns. Obviously use grid-column-gap and grid-row-gap if you have the same padding, but if not you can add token columns.
Why not padding/ margin?
You can totally use padding/ margin for this, but I like the extra column a bit better, since in css-grid you define the layout in the wrapper and this is where this belongs to semantically. You also do not have to apply it to every single item in those columns. (Also, do you apply it to the left or the right or both items?).
But this messes up my numbering
Yes, that is why you never use numbers to describe an area in css grid!
You can name your lines and with it your areas. Use this! You can use the grid-template-areas for this ore simply name it like this:
grid-template-columns: [left-start] auto [left-end right-start] auto [right-end];
Oh you want extra padding? Here you go:
grid-template-columns: [left-start] auto [left-end] 10px [right-start] auto [right-end];
Note that I am by no means a seasoned web developer (quite the opposite), but I think this approach might - generally - be the best one.
I don't see anything specific on Grid for your case, but you can easily achieve the desired result by adding padding.
HTML
<div id="grid">
<div id="element1">
<div class="content">element1</div>
</div>
<div id="element2">
<div class="content">element2</div>
</div>
<div id="element3">
<div class="content">element3</div>
</div>
</div>
CSS
#element1 {
padding-right: 5px;
}
#element2 {
padding-left: 5px;
padding-right: 10px;
}
#element3 {
padding-left: 10px;
}
.content {
height: 100%;
border: 1px solid #2e2e2e;
}
JsFiddle example:
https://jsfiddle.net/wkt39kk8/
I'm experimenting with CSS Grids, and this is the layout I'm building:
.grid {
display: grid;
align-items: center;
grid-template-columns: 1fr 4rem 1fr;
grid-template-rows: 1rem 1fr 1rem;
max-width: 900px;
margin: 0 auto;
}
.text {
/*
// Ideally, this should be
grid-area: text
*/
grid-column: 1 / 3;
grid-row: 2 / 3;
/* Fix z-index */
position: relative;
padding: 4rem;
background-color: #fff;
}
.image {
/*
// Ideally, this should be
grid-area: image;
*/
grid-column: 2 / 4;
grid-row: 1 / -1;
background-color: lightgray;
padding: 1rem;
/* Center das image */
display: flex;
justify-content: center;
}
/* Basic body */
body {
background-color: #fafafa;
font-family: sans-serif;
padding: 2rem;
}
img {
max-width: 100%;
height: auto;
}
<div class="grid">
<div class="text">One morning, when bobby woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his leg like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into
stiff sections.
</div>
<div class="image">
<img src="http://unsplash.it/400/400" />
</div>
</div>
(best to preview in full page...)
What I'd like to avoid:
.text and .image both currently are using grid-column: * / *; syntax, instead I'd like to use grid-area: text and grid-area: image;.
Is it possible to define grid-template-{columns|rows} as overlapping areas? I tried using second way of defining grid areas
, but that didn't seem to work.
Looks like you can't do [a-start] [b-start] [a-end] [b-end] in that syntax, or at least I didn't manage to.
So - Is there any way to create an overlapping grid using named areas?
I'm trying to use the named areas for convenience purely - so that it's easier to reason about the responsive layout code, instead of repeating myself multiple times in media queries.
Edit
Found the answer because of #vals answer below.
This seemed to work just fine, I probably made a syntax error in my previous attempt somewhere:
grid-template-columns: [text-start] 1fr [image-start] 4rem [text-end] 1fr [image-end];
grid-template-rows: [image-start] 1rem [text-start] 1fr [text-end] 1rem [image-end];
At least in a more basic layout, it seems to work for me:
.container {
border: solid 1px green;
height: 180px;
width: 300px;
display: grid;
grid-template-columns: [left-start] 100px [right-start] 100px [left-end] 100px [right-end];
grid-template-rows: [left-start] 60px [right-start] 60px [left-end] 60px [right-end];
}
.left {
grid-area: left;
background-color: red;
}
.right {
grid-area: right;
background-color: lightgray;
opacity: 0.5;
}
<div class="container">
<div class="left">
</div>
<div class="right">
</div>
</div>