Here,in this code I want to understand what does the grid-column-start and grid-column-end specify ?
This is the HTML part of my code.
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>
<div class="grid-item3">4</div>
<div class="grid-item5">5</div>
<div class="grid-item6">6</div>
<div class="grid-item7">7</div>
<div class="grid-item8">8</div>
<div class="grid-item9">9</div>
This is the CSS part of my code.
.grid-container
{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap : 50px;
background-color: black;
padding: 10px;
}
div
{
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 15px;
font-size: 30px;
text-align: center;
}
.grid-item1
{
grid-column-start : 1 ;
grid-column-end : 3;
}
This is the output of the code.
So, what does grid-column-end specify here ?
The grid-column-start property defines on which column-line the item will start.
and
The grid-column-end property defines how many columns an item will span, or on which column-line the item will end.
Please have a look of this below two examples: 1-grid-column-start 2-grid-column-end
So what it basically does is, When you give grid-column-start : 1| grid-column-end : 3. The column will start from the position one and span till the column 3.
The short-hand method of this will be grid-column: 1 / 3; Which starts from 1 and end at the column 3 which will make other columns to move.
See examples here : https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
Hope this helps.
To understand what grid-template-column property does, check Chrome DevTools and inspect "grid-item1". Shorter method is: grid-column: 1/3; - div spans across two columns; starting at first line and finishing at third --> | col | col |
Instead of using pixels in grid-template-columns property, I suggest using this to avoid non-responsiveness:
grid-template-columns: repeat(12/1fr);
or
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr);
Related
I'm trying to make grid-row and grid-column to be dynamically populated from API.
component.html
<div *ngFor = "let element of elements">
<div [ngStyle]="styleObject(element.Row,element.Column)">{{element['Tool Name']}}</div>
</div>
component.ts
styleObject(row : String,Column:String): Object {
let obj :Object;
obj = {'grid-row':''+Number(row),'grid-column':''+Number(Column)};
console.log(obj);
return obj.toString;
}
This way in the console it is printing but it's not reflecting in UI. Console Image
It worked properly when I tried to populate the data manually as
<div [ngStyle]="{'grid-column':'9','grid-row':'9'}">{{element['Tool Name']}}</div>
In the Inspect Element mode, the attribute is showing as enter image description here
Where am I making mistake? Thanks in advance.
According to NgStyle docs,
Set a collection of style values using an expression that returns key-value pairs.
<some-element [ngStyle]="objExp">...</some-element>
You need to return styleObject as key-value pair type instead of string type.
styleObject(row : String, Column:String): Object {
let obj :Object;
obj = {'grid-row':''+Number(row),'grid-column':''+Number(Column)};
return obj;
}
You may check out this sample demo.
Updated for grid layout issue
For your grid layout, should have .grid-container and .grid-item.
.grid-container
Wrap the whole div element and turn it to the grid.
.grid-item
The grid item with [ngStyle] have to place here so that it will be positioned based on grid-row and grid-column.
component.html
<div class="grid-container">
<div *ngFor="let element of elements" class="grid-item"
[ngStyle]="styleObject(element.row, element.column)">
{{element['name']}}
</div>
</div>
.component.css
.grid-container {
display: grid;
grid-row-gap: 50px;
grid-template-columns: auto auto auto;
justify-content: center;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
Sample Grid Layout on StackBlitz
Currently, element Three goes directly below element One, but I want it so Three goes right below Two. If I add margin-left:30px to block class, it Three goes directly below Two, but I would like to know if there is a way to get this done without using margin-left property? Here is the link to codesandbox: https://codesandbox.io/s/compassionate-smoke-l561y?file=/index.html
span.block {
display: block;
}
span.container {
display: flex;
}
<span>One</span>
<span>Two</span>
<span class="block">Three</span>
So now if I run the code above then I get this result below
One Two
Three
But I would like to update it so I get the result below without using margin.
One Two
Three
Your example is confusing, as you provide CSS with an element span.container that is never used. Plus, <span> is an inline-element that you force to become a block-element. It would be better to just use a <div> then. It is the "block-element counterpart" of a span, a simple wrapper-element without semantics.
One way would be to use Flexbox, like Evren already showed. Another way would be to use CSS-Grid. It's very easy to define columns there.
.container {
display: grid;
grid-template-columns: repeat(2, 1fr));
grid-gap: 0.5rem;
grid-template-areas:
"a b"
"c d ";
background: rgba(0, 0, 0, 0.05)
}
.container > div {
background-color: rgba(255, 0, 0, 0.15);
padding: 0.25em;
}
.container > div.my-block {
background-color: rgba(0, 255, 0, 0.15);
grid-area: d;
}
<div class="container">
<div>One</div>
<div>Two</div>
<div class="my-block">Three</div>
</div>
Or maybe you just want to show some data? Then even a simple table would be a valid choice:
<table>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td></td>
<td>Three</td>
</tr>
</table>
If you provide additional context and describe exactly what your situation is, people here on SO can help you better.
There are many different approach that you can use. That's an example with flexbox
div {
display: flex;
justify-content: flex-end;
}
span {
width: 50%;
background: blue;
}
<div>
<span>One</span>
<span>Two</span>
</div>
<div>
<span >Three</span>
</div>
I have a few scenarios in my grid. I have 4 possible grid elements, but depending on a user selection from the previous screen, I might only display three of those.
I'm running into an issue where in a particular circumstance, I want to display only 3 elements (2 per row), with the third element on the bottom row placed to the far right, essentially leaving an empty space where the first element of the second row normally would be.
const MyGrid = styled(OtherGrid)`
#media (max-width: ${BP.SMALL - 1}px) {
div:nth-child(2) {
grid-row-start: 3;
}
div:nth-child(3) {
grid-row-start: 2;
}
}
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
`;
My grid is styled from another grid, but all in all, acts like a basic grid.
<MyGrid>
<FormGroup
type={"number"}
name={"initial_moisture"}
label={"Initial Moisture (%)"}
step={0.1}
required
/>
<FormGroup
type={"number"}
name={"initial_temp"}
label={`Initial Temperature (${isMetric ? "C" : "F"})`}
step={1}
required
/>
{operatingMode != "auto_cool" && (
<>
<FormGroup
type={"number"}
name={"final_moisture"}
label={"Target Moisture (%)"}
step={0.1}
required
/>
</>
)}
{operatingMode != "auto_hydrate" && (
<>
<FormGroup
class={"auto-cool"}
type={"number"}
name={"final_temp"}
label={`Target Temperature (${isMetric ? "C" : "F"})`}
step={1}
required
/>
</>
)}
</MyGrid>
In the last possible state here (operatingMode != "auto-hydrate"), I want to place that element on the second row, but in the second column as well, and leave an empty space on the 2nd row, first column. Is there something within my parent container GoalsFieldGrid that I can define that will help me do this?
grid-column: -1; is what I'm looking for, but I'm not sure how to apply it in that specific scenario.
If I understand correctly you only require this when there are three elements only.
That being the case you can use :nth-child(3):last-child to select the element.
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
margin-bottom: 1em;
gap: .25em;
}
.item {
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
border: 1px solid grey;
}
.item:nth-child(3):last-child {
grid-column: 2;
}
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
I have a html template like the following:
<div class="my-grid-container">
<div class="summary-card" ng-repeat="cardData in summaryCardsCtrl.summaryDetails" >
<div ng-include="'.....'"></div>
</div>
</div>
The included html looks like:
<div class="card">
<div class="card-title" id="{{cardData.label}}">{{cardData.label}}</div>
<div class="card-data">
<div class="card-ico">
.....
</div>
<div class="card-value">
<span title="{{cardData.rawValue}}">{{cardData.value}}</span>
<span>%</span>
</div>
</div>
</div>
I want the first card to span for two rows, like:
I am using CSS3 GridBox like the following:
.my-grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
padding: 10px;
}
.my-grid-container > div {
text-align: center;
padding: 20px 0;
font-size: 30px;
max-height: 70px;
}
div.my-grid-container > div.card:first-child {
grid-row: 1 / 2;
}
But it did not work till now. First div did not span two rows.
What am I doing wrong?
Your code:
div.my-grid-container > div.card:first-child {
grid-row: 1 / 2;
}
You're telling the grid item to span from grid row line 1 to grid row line 2. That spans one row.
If you want to span two rows, then use this instead:
div.my-grid-container > div.card:first-child {
grid-row: 1 / 3;
}
or this:
div.my-grid-container > div.card:first-child {
grid-row: 1 / span 2;
}
Keep in mind that in every grid the number of row lines is equal to the number of rows + 1, because the last row has an extra (final) line. The same concept applies to columns.
Firefox offers a useful tool for seeing this.
In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid.
More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
I am working on the span size of a grid-column.
I have this code for my grid-columns:
.main_comp:nth-child(n+3) {
//background-color: yellow;
grid-template-columns: repeat(6, 1fr);
}
.main_comp:nth-child(n+3) .bigimg {
grid-row: 1;
grid-column: auto / span 3;
}
.main_comp:nth-childn+(n+3) .blog_art {
grid-row: 2;
grid-column: auto / span 2;
background-color: green;
}
The result I am getting is not quite what I want. I thought that:
grid-column: auto / span 2;
would span each blogart div 2 columns and three of blogart divs would span over all the 6 columns.
What I would like is something like this for all the divs from number three and onwards:
I have setup a codepen on my example and the issue I have mentioned here starts on line 66.
you need to span 2 cols. (edit similar answer as Naga Sai A, but with a different approach/selector)
you may overide your previous rule .blog_art:not(:nth-child(2)) with:
.bigimg + .bigimg ~ .blog_art {
grid-column: auto / span 2;
background: tomato;/* see us */
}
http://codepen.io/gc-nomade/pen/KmzXgx?editors=1100#0
To achieve expected result, use below option
Add below class to the blog_art
<div class="main_comp">
<div class="bigimg">image</div>
<div class="bigimg">image</div>
<div class="blog_art new">blog art</div>
<div class="blog_art new">blog art</div>
<div class="blog_art new">blog art</div>
</div>
.new:not(:nth-child(2)) {
grid-column: auto / span 2;
grid-row: 2;
background: orange;
}
Codepen URL: http://codepen.io/nagasai/pen/NjNaPX?editors=1100