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; }
Related
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;
}
This question already has answers here:
Bootstrap horizontal scrolling
(2 answers)
Bootstrap - having one column in a row with horizontal scroll instead of wrapping onto the next line
(1 answer)
Horizontal scrollable div's in a bootstrap row
(7 answers)
Closed 3 years ago.
Is there a way for Bootstrap 4 to create a table like structure with 'container', 'row' and 'col' with a container that expands beyond the width of the page resulting in a horizontal scrolling area.
In the examples I have now the columns of the row are always wrapped to the next row when the area runs out of space which is not desirable for displaying tables.
Probably what you're looking for is to stop the columns from wrapping, there was a similar question here
Basically use a row with the class .flex-nowrap
I do agree with #cloned from the comment - to show data in a table format there is absolutely nothing wrong with using a table tag, bootstrap also helps you out with those: table documentation from bootstrap
Here's the example that works for me just fine. Very cool stuff.
#{
ViewBag.Title = "Home Page";
}
<div>
<h1>Content</h1>
<p>Dit is de content van de site</p>
<div>
<div class="table-responsive text-nowrap" >
#for (int i = 0; i < 20; i++)
{
<div class="row flex-nowrap">
#for (int index = 0; index < 12; index++)
{
<div class="col">Column #index</div>
}
</div>
}
</div>
</div>
</div>
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.
For example, there are total 12 elements.
I want to apply my style only on last n (1, 2, 3...) numbers of child of total 12 elements; how can I do this?
I think what you are looking for is the css pseudo-class :nth-last-child (see MDN)
Just use a negative n value and add the index from the end (represents number of elements)
.parentClass > * :nth-last-child ( -n + 3 ) {
/* CSS here for last 3 elements */
}
https://jsfiddle.net/evm0mg8j/
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