I need help, I have a document that I need to generate in HTML CSS then that will be transformed into PDF.
I have a table to do by putting information like below (the color is not important) :
Can we put the grid directly in a tag, maybe like that?
// example
<td class="grid">
<p>
...text
</p>
</tp>
I have tried different ways but I can't get the results I wanted.
This will apply 2 columns on one row
add .grid-container to the td,
and col1 and col2 to each P under the container
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas:
"col1 col2";
}
.col1 { grid-area: col1; }
.col2 { grid-area: col2; }
<div class="grid-container">
<div class="col1"></div>
<div class="col2"></div>
</div>
Related
I have a CSS grid with several columns and many rows (I'm building a timetable view). The rows and columns are defined on the grid element itself, and then on the elements within the grid I set their column (always only one column) and their rows (might be more than one row).
An example is as follows:
.grid {
display: grid;
grid-template-rows: [row-a] 1fr [row-b] 1fr [row-c] 1fr [row-d] 1fr;
grid-template-columns: [col] 1fr;
flex-grow: 1;
}
.entry-one {
grid-column: col;
grid-row: row-a/row-d;
background-color: red;
}
.entry-two {
grid-column: col;
grid-row: row-b;
background-color: green;
}
<div class='grid'>
<div class='entry-one'>
Foobar
</div>
<div class='entry-two'>
Barfoo
</div>
</div>
Now, what I would like to have is that the elements resize themselves and flow nicely, such that they fit next to each other. I can mock this using width and margin on the elements:
.grid {
display: grid;
grid-template-rows: [row-a] 1fr [row-b] 1fr [row-c] 1fr [row-d] 1fr;
grid-template-columns: [col] 1fr;
flex-grow: 1;
}
.entry-one {
grid-column: col;
grid-row: row-a/row-d;
background-color: red;
width: 50%; /* ADDED */
}
.entry-two {
grid-column: col;
grid-row: row-b;
background-color: green;
width: 50%; /* ADDED */
margin-left: 50%; /* ADDED */
}
<div class='grid'>
<div class='entry-one'>
Foobar
</div>
<div class='entry-two'>
Barfoo
</div>
</div>
However this is not optimal, especially as the elements are inserted dynamically. Is there a way to have the elements size & align themselves automatically using CSS? I've tried to use display: flex on the entries, but that did not result in what I want (or maybe I forgot to add another rule).
Thank you for any ideas, and have a nice day!
I made this to see if that is what you are looking for
.grid{
display: flex;
grid-template-rows: [row-a] 1fr [row-b] 1fr [row-c] 1fr [row-d] 1fr;
grid-template-columns: [col] 1fr;
flex-grow: 1;
}
I just changed your display to flex and delete your margin-left: 50%; on the entry two, hope it is what you are looking for
I was wondering if it was possible to use CSS grids to do intermediate splits in columns, is this doable? Below a graphical example.
Thank you very much.
EDIT: I am using display: grid, what I am trying to achieve is something responsive that would put each cell under each other on a mobile device.
I just created the example you need but try to make sure that you assign proper names (instead of col-x or row-y) like navigation or sidebar for example.
I'd recommend to just double the amount of rows and assign the amount of rows twice for the left column. Especially take a look at grid-template-areas in the .grid CSS.
To change the way the grid looks on smaller devices you can apply #media queries on the .grid class to adjust the grid-* attributes.
This sample below is not the shortest nor the smartest solution for that but it's the most visual i guess.
.grid {
height: 200px;
display: grid;
grid-template-columns: 80% auto;
grid-template-rows: repeat(6, 1fr);
grid-template-areas:
"col-1-row-1 col-2-row-1-1"
"col-1-row-1 col-2-row-1-2"
"col-1-row-2 col-2-row-2-1"
"col-1-row-2 col-2-row-2-2"
"col-1-row-3 col-2-row-3-1"
"col-1-row-3 col-2-row-3-2"
}
.col-1-row-1,
.col-1-row-2,
.col-1-row-3,
.col-2-row-1-1,
.col-2-row-1-2,
.col-2-row-2-1,
.col-2-row-2-2,
.col-2-row-3-1,
.col-2-row-3-2 {
justify-self: center;
align-self: center;
}
.col-1-row-1 {
grid-area: col-1-row-1;
}
.col-1-row-2 {
grid-area: col-1-row-2;
}
.col-1-row-3 {
grid-area: col-1-row-3;
}
.col-2-row-1-1 {
grid-area: col-2-row-1-1;
}
.col-2-row-1-2 {
grid-area: col-2-row-1-2;
}
.col-2-row-2-1 {
grid-area: col-2-row-2-1;
}
.col-2-row-2-2 {
grid-area: col-2-row-2-2;
}
.col-2-row-3-1 {
grid-area: col-2-row-3-1;
}
.col-2-row-3-2 {
grid-area: col-2-row-3-2;
}
<div class="grid">
<div class="col-1-row-1">Col 1 Row 1</div>
<div class="col-1-row-2">Col 1 Row 2</div>
<div class="col-1-row-3">Col 1 Row 3</div>
<div class="col-2-row-1-1">Col 2 Row 1.1</div>
<div class="col-2-row-1-2">Col 2 Row 1.2</div>
<div class="col-2-row-2-1">Col 2 Row 2.1</div>
<div class="col-2-row-2-2">Col 2 Row 2.2</div>
<div class="col-2-row-3-1">Col 2 Row 3.1</div>
<div class="col-2-row-3-2">Col 2 Row 3.2</div>
</div>
You can just set a new html element below (for example) column2/row1 and set the style as display: grid; grid-template: auto/auto; align-self: center
So yesterday I started learning grids in css. I thought that mimicking the main windows 8 metro panel would be great exercise (my reference photo:
https://prnt.sc/orgusg). I defined all of the panels, got them properly arranged. Here's some reference code showing what I've tried for template columns.
.boxes{
margin: 50px 150px;
display: grid;
/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 2fr 2fr 2fr 2fr;
grid-template-columns: 1fr 1fr 1fr 1fr; This is what I've tried here*/
grid-auto-rows: 50%;
grid-gap: 10px;
}
For the first command of "grid-template-columns" I tried making all of the boxes that look wide span from their initial position (e.g 1) to the position where they should look wide (e.g 2).
.mail{
grid-column: 1/2;
}
For the second command of "grid-template-columns" I tried splitting the boxes.
.ie{
grid-column: 3/4;
}
But it gave me weird bugs.
My problem: I can't get the boxes to look different sizes, I would appreciate if you could help me, thanks!
One option is to use grid-template-area as suggested in Kareem's answer.
However, in this case I don't think it's a good solution, because it requires you to specify where every app goes in your grid. I don't actually think you want that. You want to be able to say "this box should take up N rows and N columns" and let the browser do that for you. This is actually easy to do.
If you have a grid element that should span two columns, you can do grid-column: span 2, or grid-row: span 2 for rows. Or, of course, both, or a higher number.
By default, the browser will only put the elements in order. If a grid element won't fit in the next space, it will move to a new row and everything afterwards will be on that row. In this case, I don't think you want that, so you can do grid-auto-flow: dense, which will always put the content in the first available box, no matter what order they end up in. For example, here:
.boxes {
margin: 50px;
height: max-content;
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-auto-rows: 100px;
grid-gap: 10px;
grid-auto-flow: dense;
}
.boxes>div {
background: darkblue;
color: white;
font-weight: bold;
padding: 5px;
}
.mail {
grid-column: span 2;
}
.edge {
grid-row: span 2;
}
<div class=boxes>
<div>Word</div>
<div class=mail>Mail</div>
<div class=edge>Edge</div>
<div>Excel</div>
<div>cmd</div>
<div class=mail>Mail</div>
<div>Solitaire</div>
</div>
Incidentally, the problem you were having in the first place is a fairly simple one. Your code says:
.mail{
grid-column: 1/2;
}
The reason this comes up with a box that only uses one column is... because that's what grid-column: 1/2 means! The numbers don't refer to the columns in the page, but to the lines that separate them. For example, look at this diagram:
1 2 3 4
| | | |
| | | |
| | | |
| | | |
| | | |
You might think that 1/2 refers to filling up the first two columns: it doesn't. It refers to the first two lines: i.e. the first "column". Is this confusing? Perhaps. Now you know, it won't be!
Finally, I've also changed your grid-template-columns to repeat(auto-fill, 100px). You don't know how wide the screen is, so why would you specifically want four columns? This code says "as many 100px columns as you can fit in the space provided".
You can use grid-template-area property, This will make it much more easier for you:
Here is Full Description About CSS Grid
First: define your areas in grid container, something like:
.grid {
display: grid;
grid-template-areas:
"mail mail calender calender"
"ie chrome message message"
"store store store camera";
}
Each "" contain one row. For the first row we have 4 columns:
Mail: took 2 from 4 columns
Calender: took 2 from 4 columns
Now to make each div take it's actual position:
1- add the div in HTML
<div class="mail"></div>
2- For the CSS:
.mail{
grid-area: mail;
}
And So on,
Working Demo:
body {
display: flex;
}
.grid {
display: grid;
width: 700px;
height: 525px;
margin: auto;
grid-template-areas: "mail mail calender calender" "ie chrome message message" "store store store camera";
grid-gap: 10px;
}
.mail {
grid-area: mail;
background-color: #0399AA;
}
.calender {
grid-area: calender;
background-color: #5B479C;
}
.ie {
grid-area: ie;
background-color: #4473B9;
}
.chrome {
grid-area: chrome;
background-color: #FFCD42
}
.message {
grid-area: message;
background-color: #963294
}
.store {
grid-area: store;
background-color: #099648
}
.camera {
grid-area: camera;
background-color: #B01D3A
}
<div class="grid">
<div class="mail"></div>
<div class="calender"></div>
<div class="ie"></div>
<div class="chrome"></div>
<div class="message"></div>
<div class="store"></div>
<div class="camera"></div>
</div>
I want to make my website using CSS grid system but it seems not to be working. Here is my code:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq" "about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>
When using the grid-template-areas property, string values must have the same number of columns.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq" "about-us about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>
You can use a period, or an unbroken line of periods, to represent an empty cell (spec reference).
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq" " ... about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>
From the Grid spec:
7.3. Named Areas: the grid-template-areas
property
All strings must have the same number of columns, or else the declaration is invalid.
If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.
Non-rectangular or disconnected regions may be permitted in a future version of this module.
Note: As stated in the spec, in addition to an equal number of columns, grid areas must also be rectangular (see this post for more details).
If this:
Is the desired result, then you've only made a minor error.
You've set the grid to be a 2 x 2 square here:
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
But you aren't filling all the space.
grid-template-areas: "logo faq", "about-us";
That line of code is saying "In the top two squares put logo and faq respectively. In the bottom two rows put about-us" and that causes an error. If you want one grid-area to fill the entire space then you need to declare it twice. Thus the above line becomes:
grid-template-areas: "logo faq", "about-us about-us";
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq", "about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>
I've been playing around with CSS Grid recently and have noticed something that I can't see to find the answer to. Let's say I split my page out to have 2 columns, and then a row below it, with another column (which spans both columns). On mobile, I'd like them to stack one on top of the other and then go back to layout described above after a certain breakpoint. Here is the markup:
HTML
<div class="grid">
<div class="upper">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="lower">
<div class="c">C</div>
</div>
</div>
SCSS
.upper, .lower {
display: grid;
}
.upper {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
background-color:grey;
grid-gap:10px;
#media only screen and (max-width:800px) {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
.lower {
grid-template-columns: 1fr;
grid-template-rows:auto;
background-color: green;
grid-gap:10px;
}
I've noticed that on mobile, even though I've defined grid-gap for both of my grid sections, on mobile when the columns stack, the grid-gap is not maintained. So in the fiddle below, when you make the window smaller, you can see that when the columns, stack one on top of the other, the gap between B and C is non existent. Here is the fiddle:
Fiddle
Hope I'm making sense!
EDIT: Bear in mind I'm only testing this in Firefox and Chrome (which support grid).
The grid-gap rule doesn't work between B and C because it doesn't apply.
This rule creates gutters between rows and columns inside a grid container.
But you are declaring grid-gap on .upper and .lower, two siblings in a block container. Their parent (.grid) is not a grid container because it doesn't have display: grid or inline-grid.
Therefore, grid-gap: 10px on .upper is creating a 10px gutter between A and B...
and grid-gap: 10px on .lower is creating a 10px gutter between.... nothing (.lower has only one grid item. grid-gap creates gutters between multiple grid items).
fiddle demo 1
For grid-gap to work among the .upper and .lower siblings you need to apply it to their parent, which must be a grid container.
fiddle demo 2
.grid {
display: grid; /* NEW */
grid-gap: 25px; /* NEW */
}
.upper, .lower {
display: grid;
}
.upper {
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
}
.lower {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 10px; /* does nothing unless there are multiple grid items */
}
#media ( max-width:800px ) {
.upper {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
.upper > * { border: 1px dashed red; }
.lower > * { border: 1px dashed blue; }
<div class="grid">
<div class="upper">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="lower">
<div class="c">C</div>
</div>
</div>