What does the CSS3 style grid-column-start: 2; do?
Please try to answer from the following:
• Generates grid with 2 columns
• Creates a grid item on second column
• Starts grid item from second column
• Creates a 2×2 grid
It determines a grid item's location within the grid by referring to specific grid lines.
grid-column-start/grid-row-start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends.
For Your case suppose following css property
.item-a{
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start
grid-row-end: 3
}
The output will be See this image
Starts grid item from second column
Related
This question already has answers here:
How to center elements on the last row in CSS Grid?
(8 answers)
Aligning grid items across the entire row/column (like flex items can)
(3 answers)
Closed 24 days ago.
I am working on a clients website and I have succesfully done this before but ONLY with one item. Now I am working on a grid with 43 elements in columns of 4. The last row has 3 items which I'd like centered. See here.
I have been stuck on this issue for a while and I belive I am just simply not understanding how the last child/n-th child relationship works
I have used THIS code before to center a singular item
selector .e-loop-item:last-child:nth-child(3n + 2) { grid-column-end: 3; }
Now I have tried code like
selector .e-loop-item:last-child:(41)(3n + 1) { grid-column-end: 11; }
selector .e-loop-item:last-child(42):nth-child(3n + 2) { grid-column-end: 11; }
selector .e-loop-item:last-child(43):nth-child(3n + 2) { grid-column-end: 11; }
I am using CSS Grid in my layout...
How do I set different column size on first row and full width on second row?
Is this possible?
Thank you so much!!!
This is not possible, the idea of css grid is to have a "grid", that is all the rows follow the same column configuration.
What you can do however is have an element span several column, and here you have several options:
This one stretches from the first column to the first from the end
div:nth-child(3) {
grid-column: 1 / -1;
}
This one spans 2 columns from the first one:
div:nth-child(3) {
grid-column: 1 / span 2;
}
I have a special css grid layout that is based on completely square grid boxes that are defined like this:
grid-template-columns: repeat(5, minmax(200px, 20vw));
grid-auto-rows: minmax(200px, 20vw);
grid-template-areas:
"branding nav nav . meta"
". title title featured-image ."
". primary primary featured-image ."
". secondary secondary featured-image ."
". footer footer . .";
problem is that I need to have a content area within this grid that is flexible. By default it spans 2 columns and 2 rows. The content area is outlined in red:
I would like the layout to make it possible for the content area to span for example 2 columns and 4 rows for example. Basically 2-n rows based on the content.
Is there any smart way of doing this?
I did something similar for a HomePage, but using JavaScript not just CSS grid:
A card grid ocupying 2 rows only if the contents overflow the container.
static expandIfActive(card){
const content = card.querySelector('.content')
const body = card.querySelector('.card-body')
return body.clientHeight - options.clientHeight - (#margins and paddings) == 0
}
If the content matches the heigth of the container means it's overflowing, so I add the property grid-row: span 2
I am trying to make a simple sidebar layout with a flat HTML structure, in which the first <aside> element fills in the 1st column completely.
My problem is, that the negative row end value seems to not work for the implicitly created rows for all my elements in the 2nd column.
Expected:
Actual:
Below is a runnable code snippet that illustrates the problem.
article {
display: grid;
grid-template-columns: 200px 1fr;
background: gray;
}
aside {
grid-row: 1/-1;
grid-column: 1/2;
background: pink;
}
section {
grid-column: 2/3;
background: yellow;
}
<article>
<aside>In the left column (top to bottom)</aside>
<section>In the right column</section>
<section>In the right column</section>
<section>In the right column</section>
</article>
You can only use negative integers in an explicit grid.
See the Grid spec here:
7.1. The Explicit
Grid
Numeric indexes in the grid-placement properties count from the edges
of the explicit grid. Positive indexes count from the start side
(starting from 1 for the start-most explicit line), while negative
indexes count from the end side (starting from -1 for the end-most
explicit line).
and here...
8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
If a negative integer is given, it instead counts in reverse, starting
from the end edge of the explicit grid.
Making a grid area span an entire column / row, including implicit tracks, when the number of tracks in the grid is unknown, is not possible in CSS Grid Level 1, unless you want to try to hack it.
I use JavaFX2.0 to my java application, then I use .fxml file to build my UI, then I use css to decorate button or label.
Just like:
/* JavaFX CSS - Leave this comment until you have at least create one rule which uses -fx-Property */
.lebel{
-fx-alignment: center ;
-fx-pref-width:20% ;
-fx-pref-height: 180 ;
-fx-background-color: transparent ;
-fx-text-fill: white ;
-fx-background-size: stretch;
-fx-padding: 0 0;
-fx-font-size: 20sp;
}
Five labels are placed horizontally, but the property -fx-pref-width:20% doesn't work on the UI. I am trying to use -fx-pref-width:% to design UI for different sizes of stage.
-fx-pref-width is defined by Region. See this.
This is the abstract from it:
Property: -fx-min-width, -fx-pref-width, -fx-max-width
Values: < number >
Default: -1
Comments: Percentage values are not useful since the actual value would be computed from the width and/or height of the Region's parent before the parent is laid out.
So, percentages are not supported. You would need to do it using code via binding perhaps.