I have a CSS grid layout, and I would like to have one of the grid-items span two rows.
Normally I would do this via with the grid-row: span 2 property, or by using named grid areas.
In the example though, despite there being room for .news-item-5 to also span the row below (and effectively take over the space allocated to .news-item-7), I can't get this to work.
Is it not possible in this grid layout to have .news-item-5 span two rows?
As well as the included snippets I have a codepen: https://codepen.io/emilychews/pen/GzpBmO
Any help would be amazing.
/* ---- GRID */
.second-grid-wrapper {
display: grid;
grid-gap: 1rem;
grid-template-columns: 2fr 2fr 1fr;
grid-template-areas:
"news-1 news-2 news-3"
"news-1 news-4 news-5"
"news-6 news-4 news-5";
}
.news-item-1 {grid-area: news-1}
.news-item-4 {grid-area: news-4}
/* .news-item-5 {grid-area: news-5} */
.news-item-7 {
background: #fff;
}
.news{
background: lightblue;
box-sizing: border-box
}
<section class="second-grid-wrapper">
<article class="news news-item-1">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 1</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-2">
<div class="top-news-item-text-wrapper">
<h3 class="news-item-heading td">A SMALLER HEADLINE - 2</h3>
<a target="_blank" class="bottom-text td">Link</a>
</div>
</article>
<article class="news news-item-3">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline -3</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-4">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 4</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-5">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 5</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-6">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">SOMETHING ELSE - 6</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-7">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 7</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
</section>
Solution
Add grid-auto-rows: 1fr to your grid container.
/* ---- GRID */
.second-grid-wrapper {
display: grid;
grid-auto-rows: 1fr; /* new */
grid-template-columns: 2fr 2fr 1fr;
grid-gap: 1rem;
grid-template-areas:
"news-1 news-2 news-3"
"news-1 news-4 news-5"
"news-6 news-4 news-5";
}
.news-item-1 {grid-area: news-1}
.news-item-4 {grid-area: news-4}
.news-item-5 {grid-area: news-5}
.news-item-7 {background: #fff;}
.news{
background: lightblue;
box-sizing: border-box
}
<section class="second-grid-wrapper">
<article class="news news-item-1">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 1</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-2">
<div class="top-news-item-text-wrapper">
<h3 class="news-item-heading td">A SMALLER HEADLINE - 2</h3>
<a target="_blank" class="bottom-text td">Link</a>
</div>
</article>
<article class="news news-item-3">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline -3</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-4">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 4</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-5">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 5</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-6">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">SOMETHING ELSE - 6</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-7">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 7</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
</section>
Explanation
The element (.news-item-5) is actually expanding two rows in your code. Here's the view using Firefox's Grid outline tool:
You can see that the News Item 5 grid item is expanding across two rows. However, its content is confined to the first row.
This is most likely due to an absence of defined row lengths. As a result, grid-template-rows remains at its default setting: none, which means all rows will be implicitly created and sized by grid-auto-rows, who's default value is auto.
From the spec:
§ 7.2. Explicit Track Sizing: the grid-template-rows and
grid-template-columns properties
The none value.
Indicates that no explicit grid tracks are created by this property (though explicit grid tracks could still be created by grid-template-areas).
Note: In the absence of an explicit grid any rows/columns will be implicitly generated, and their size will be determined by the grid-auto-rows and grid-auto-columns properties.
Therefore, as a solution, give the grid some solid guidance by switching from grid-auto-rows: auto to grid-auto-rows: 1fr.
Based on your CSS code, your grid-template-areas indicate that you need to adjust the grid-template-columns: to read 2fr 2fr 2fr;. You have your style for .news-item-5 commented out, so make that visible and comment out the style for .news-item-7.
Then move down to your HTML and either remove (or comment out) the <article class="news news-item-7"> section that you want .news-item-5 to extend into.
Related
CSS grid does not seem to be working, and I do not know why. Can anyone advise?
I have an index.html and css via Visual Studio. The html is basic. I made a container with a couple of items in.
This is the html
.container {
display: grid;
grid-template-columns: 1fr 200px;
}
<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>
Can someone let me know as my take on it is the container is the parent so I use that class. I changed it to items and nothing.
I have tried changing the elements and that still did not work.
I don't have any other options.
It's really hard to understand what you are expecting😐. Please make your questions more specific in the future.
However, from what I understand, you are not too happy about the second element sitting at extreme right. Ok let's talk about that.
If you want to use the grid-template-columns property in your CSS, Ask yourself these:
How many columns do I want?
How much width do I want on each column?
CASE 1: If you want only ONE column, i.e. you want your list to look like this
Lorem ipsum dolor sit
Lorem ipsum dolor sit
Lorem ipsum dolor, sit
Use grid-template-columns: auto one auto for one column
.container {
display: grid;
grid-template-columns: auto;
}
<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>
CASE 2: If you want TWO columns, i.e. you want your list to look like this
Lorem ipsum dolor sit Lorem ipsum dolor sit
Lorem ipsum dolor, sit
Use grid-template-columns: auto auto two autos for two columns
.container {
display: grid;
grid-template-columns: auto auto;
}
<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>
CASE 3: If you want THREE columns, i.e. you want your list to look like this
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor, sit
Use grid-template-columns: auto auto auto three autos for three columns
.container {
display: grid;
grid-template-columns: auto auto auto;
}
<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>
Now that you know how many columns you want, next you'd want to decide the width you want on each column and width can be different for each column.
If you don't want too much trouble, keep using auto to automatically set the width for each column. But if you're ready to do a little bit of tinkering, start changing the values.
For example, you can say grid-template-columns: 1fr 200px 20%, this will generate a grid of three columns.
The first column will have width of 1fr.
The second column will have width of 200px.
The third column will have width of 20% of its parent, container.
.container {
display: grid;
grid-template-columns: 1fr 200px 20%;
}
<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>
So, in your case, template-grid-columns: 1fr 200px means the first column is of 1fr width and the second is of 200px. Use your browsers dev tools to verify it.
Here are some useful links:
Play with grid-template-columns
Learn more about Grid
I hope that solves your problem. Happy Coding!😺
<div>
<button>Lorem ipsum</button> <span>20</span>
<button>consectetur adipiscing elit</button> <span>30</span>
<button>ABC</button> <span>40</span>
<button>Something!</button> <span>50</span>
</div>
I want output screen to look like below:
Lorem ipsum 20
consectetur adipiscing elit. 30
ABC 40
Something! 50
Use CSS grid
div {
display: inline-grid;
grid-template-columns: auto auto;
gap: 0 10px;
justify-items:start;
}
<div>
<button>Lorem ipsum</button> <span>20</span>
<button>consectetur adipiscing elit</button> <span>30</span>
<button>ABC</button> <span>40</span>
<button>Something!</button> <span>50</span>
</div>
I have a CSS column layout.
I find however, that there is an unnecessary gap at the bottom (indicated by the pink arrow in screengrab).
This gap disappears if I remove display: inline-block from the CSS, but then some of the <section> elements break in two. I've also tried using break-inside: avoid but it appears to do nothing at all.
Is there a fix for this?
<div class="feed-index">
<div class="feed">
<section>
Lorem ipsum dolor sit amet
</section>
<section>
Lorem ipsum dolor sit amet
</section>
<section>
Lorem ipsum dolor sit amet
</section>
<section>
Lorem ipsum dolor sit amet
</section>
<section>
Lorem ipsum dolor sit amet
</section>
</div>
</div>
.feed-index .feed {
column-count: 3;
column-gap: 40px;
}
.feed-index .feed > section {
display: inline-block;
margin-bottom: 50px;
overflow: hidden;
}
Add vertical-align:top; to your CSS for .feed-index .feed > section
The reason is your overflow: hidden; actually changes the block. See more info here: Why does x-overflow:hidden cause extra space below?
I am wondering if it is possible to left align text below center aligned text, so that both texts start from same position.
In the example figure. The TITLEs are center aligned and the copy below is left aligned.
How can you realise something like this with CSS?
Here is a JSFiddle to start from
https://jsfiddle.net/j5p7v8m9/
<div>
<p style="text-align: center;">TITLE</p>
<p style="text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
Here is the answer. I've updated your JSFiddle. You need to add some wrappers for each divs, then you can centerize the title as follows:
HTML:
<div class="container">
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
CSS:
.container{
display: block;
}
.col{
float: left;
width: 33.33%;
}
.contents{
margin-left: 20px;
margin-right: 20px;
}
.title{
text-align: center;
}
JSFiddle: https://jsfiddle.net/53oLpvqg/
Please try with bootstrap css it my help you for easy css.
<div class="col">
<p class="text-center">Title</p>
<p class="text-left">Test content Content</p>
</div>
Check Fiddle https://jsfiddle.net/0h2nmj3r/
*Look at other answers for directions on align text this is answer will help with getting that column effect
The best way to get three columns like that is to use a type of special display in css called "flex". Flex allows you to easily align elements within the parent html element.
.container{
display:flex;
flex-direction : row;
justify-content: space-around;
}
.text-box{
display: flex;
flex-direction:column;
align-items:flex-start;
width:20%;
}
p{
margin: 0 0 5px 0;
}
<div class="container">
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
So as you can see I have applied flex to both the container and the text-box's. Left align can be used like in these other answers but i opted for align-items:flex-start so any element within the text-box will be aligned to the left.
By setting justify-content:space-around it makes each element within the container have equal space around it so if you were to change the window size the spaces would be relative and change. I would recommend studying more about flex and grid to improve your css skills.
I am trying to set up a section of a website to have a column of text, a long vertical picture, and another column of text on the other side of the picture. I have been able to achieve the look I want but only by using a negative top margin(not shown in this example).
The code I have tried is here
http://www.bootply.com/3hKEyWGlJp
You don't need the extra row since a new row will create a new block below the previous row. It's how CSS grids work (Bootstrap in your example). Just put the content of step 1/2 in left column, div in center column and step 3/4 content in right column.
<div class="row">
<div class="col-md-3 col-md-offset-1">
<p class="lead text-left">Step 1: asdf asdf asdf </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at..</p>
<p class="lead">Step 2: Lorem ipsum dolor sit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at</p>
</div>
<div class="col-md-3">
<div class="phone"></div>
</div>
<div class="col-md-3">
<p class="lead text-left">Step 3:Lorem ipsum dolor sit</p>
<p>Start typing your address & we will give you a list of options to choose from.</p>
<p class="lead">Step 4: Lorem ipsum dolor sit</p>
<p>dsadsdad sddasd saddsd dasdsada sdasds d ds ads dadsd dasd sada sdasdsdd sads dadsdda sdsada sdasdsd</p>
</div>
</div>
Example: http://www.bootply.com/rCr1B4wiKD