For example I am trying to create a footer with 4 links spaced evenly with the following code
footer{
margin-top: 20px;
border-top: 1px solid #eeeeee;
border-radius: 2px;
}
#footer_list{
display:inline-grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
list-style-type: none;
}
.footer_list_item{
color: #001f3f !important;
}
<footer>
<ul id="footer_list">
<li class="footer_list_item">A Blah Blah Production</li>
<li class="footer_list_item">Phone: xxx-xxx-xxxx</li>
<li class="footer_list_item">Email: support#company.com</li>
<li class="footer_list_item" href="#">Career Info</li>
</ul>
</footer>
http://jsfiddle.net/vq9b7c0e/3/
Is setting a list to display:grid invalid? As all of the items seem to be randomly spaced
Setting an HTML element to display: grid (or inline-grid) is perfectly valid.
According to the W3C definition, the display property applies to all elements.
However, some elements don't play well in some browsers with changes to the display property. See this post (which applies to flex and grid): Flexbox not working on button or fieldset elements
You wrote:
Is setting a list to display: grid invalid? As all of the items seem to be randomly spaced.
Your items are not randomly spaced. The grid has four equal width columns, just like you specified:
Your code:
#footer_list{
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
Your layout (as seen in Chrome, Firefox and Edge):
So I'm not sure what you mean. But here's a simplified version of your code. Since you're already using the HTML5 footer element, which provides meaningful semantics, why the ul?
footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 40px;
grid-column-gap: 5px;
}
a {
color: #001f3f !important;
text-decoration: none;
border: 1px solid lightgray;
background-color: lightgreen;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: .9em;
}
<footer>
A Blah Blah Production
Phone: xxx-xxx-xxxx
Email: support#company.com
Career Info
</footer>
jsFiddle demo
Dont use "href" in <li>
I do not know exactly what is going on, but it may help you -
footer{
margin-top: 20px;
border-top: 1px solid #eeeeee;
border-radius: 2px;
}
#footer_list{
display:inline-grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: 100%;
list-style-type: none;
}
.footer_list_item{
color: #001f3f !important;
}
.footer_list_item a {
word-break: break-all;
}
<footer>
<ul id="footer_list">
<li class="footer_list_item">A Blah Blah Production</li>
<li class="footer_list_item">Phone: xxx-xxx-xxxx</li>
<li class="footer_list_item">Email: support#company.com</li>
<li class="footer_list_item">Career Info</li>
</ul>
</footer>
http://jsfiddle.net/qhv40j1d/
Related
I am new on css. I am trying to built a calculator. What I am trying to do is that
when I click a button on the calculator, a menu (sin, cos, tan, cot) must show up. I have no idea if it is possible. I searched it but I am having hard time to find it. Can you help ? I explained below in detail.
Here is some of html...
<div class="calculator">
<div class="screen">536,125</div>
<div class="above-numbers">
<div>√</div>
<div>Π</div>
<div>^</div>
<div>!</div>
<div class="show-more">V</div> // When I hover over this div, page must render the div below but
it should not render it if I am not hovering over it
<div class="tr-menu">
<div>sin</div>
<div>cos</div>
<div>tan</div>
<div>cot</div>
<div>cosec</div>
<div>sec</div>
</div>
</div>
I am triyng to control class="tr-menu" div from class="show-more" div.
Here is some of my css
.above-numbers{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
cursor: pointer;
justify-content: space-between;
}
.above-numbers div{
border: none;
color: white;
background-color: #282a2d;
cursor: pointer;
}
.show-more{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.show-more:hover{
height: 100px;
}
when I hover over 'V' a menu must show up and that menu must contain sin cos tan ....
I managed to get hover working by changing css for this :
.tr-menu{
display:none;
}
.show-more:hover + div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 100px;
}
It should get you started. See here for example : https://www.geeksforgeeks.org/display-div-element-on-hovering-over-a-tag-using-css/
Oh, and maybe you should update your title for something more specific since you were looking for a CSS hover.
I am trying to understand how CSS grids work. I've tried to make an example of a store item as practice, but I am at a loss.
Here's my how my CSS currently looks. Cut off at the top, weird spacing, and the right side is not coming together at all.
How's how it would ideally look
Here is my current CSS, I hope someone can help explain where I am misunderstanding the use of
CSS grids.
.store-currency {
height: 3vh;
}
.item {
display: flex;
align-items: center;
grid-row: 1 / span 2;
}
.currency {
display: flex;
align-items: center;
}
#num-bought-item0 {
display: flex;
align-items: center;
justify-content: right;
margin-right: 10px;
grid-column: 1 / span 2;
}
.store-item {
height: 15vh;
width: 100%;
display: grid;
grid-template-columns: 2fr;
grid-template-rows: 1fr 1fr;
font-size: 24px;
color: white;
border: 5px white solid;
justify-content: left;
align-items: center;
}
.store-item img {
margin: 10px;
height: 8vh;
}
.store-container {
display: flex;
height: 100%;
width: 30vw;
z-index: 0;
background-color: saddlebrown;
left: 0;
position: absolute;
text-align: center;
}
HTML:
<div class="store-container">
<div class="store-item" id="item0">
<div class ="item">
<img src="dumbell.png" alt="">
<span>Dumbbell</span>
</div>
<div id="num-bought-item0">
<span>Owned</span>
<span id="count-item0">0</span>
</div>
<div class="currency">
<img class="store-currency" src="coin.png" alt="">
<span>100000</span>
</div>
</div>
you did the first steps.
To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.
.store-container {
display: grid | inline-grid;
}
grid – generates a block-level grid
inline-grid – generates an inline-level grid
With grid-template-columns you can define how many columns will appear in your layout.
P.S Fr unit is a fractional unit and 1fr is for 1 part of the available space. In this example each column would take ~ 25% from the available space.
.container {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
For your task, you can use grid-template-areas feature.
The grid-template-areas CSS property specifies named grid areas,
establishing the cells in the grid and assigning them names.
For example:
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
This will generates something like that in modern browsers:
If you need more examples, take a look here:
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
https://css-tricks.com/snippets/css/complete-guide-grid/
Some of the examples are taken from the second site.
It looks like you are mixing flex and grid properties. grid-row and grid-column are only avalaible for a grid display (2D), not a flex display (1D).
You can try to play around with flex (worse choice since it is drawing a 1D layout) , you can use grid , which is made for this kind of layout.
Here a couple example with flex and grid
/* GRID make it simple*/
.grid {display:grid;}
#num-bought-item2 {grid-row:1/3;grid-column:2;}
#num-bought-item2 {display:grid;margin:auto;text-align:center}
/* layout done */
/* some reset for the demo*/
*{box-sizing:border-box;}
.store-container {display:grid;justify-content:center;}
.store-item {border:solid;}
.store-item>div {padding:0.5em;}
img{vertical-align:middle;}
[src="https://dummyimage.com/25/ff0"]{border-radius:50%}
big{color:darkgreen;background:lightyellow;}
/* FLEX make it a mess */
.flex {display:flex}
.column {flex-flow:column wrap;height:120px;}/* here an height is to be set so it wraps*/
/* since it is not made for this, we need to mess around */
.flex #num-bought-item1{order:2}/* reorder item */
.flex .item {height:0;min-height:60%;}/* hide it, then show it */
.flex .currency {height:0;min-height:40%;}/* hide it, then show it */
.flex #num-bought-item1{display:flex;flex-direction:column;justify-content:center;text-align:center;margin:auto;}
/* and flex did not do it */
<p>Let's try via flex</p>
<div class="store-container">
<div class="store-item flex column" id="item1">
<div class="item">
<img src="https://dummyimage.com/50" alt="">
<span>Dumbbell</span>
</div>
<div id="num-bought-item1" >
<span>Owned</span>
<span id="count-item1">0</span>
</div>
<div class="currency">
<img class="store-currency" src="https://dummyimage.com/25/ff0" alt="">
<span>100000</span>
</div>
</div>
</div>
<p>And via <big>grid</big> </p>
<div class="store-container">
<div class="store-item grid" id="item2">
<div class="item">
<img src="https://dummyimage.com/50" alt="">
<span>Dumbbell</span>
</div>
<div id="num-bought-item2" >
<span>Owned</span>
<span id="count-item1">0</span>
</div>
<div class="currency">
<img class="store-currency" src="https://dummyimage.com/25/ff0" alt="">
<span>100000</span>
</div>
</div>
</div>
At first, all items in the grid are in the same size i want it to be
But after clicking the 'Load More' button, the height for the new items are not the same:
Example here
I want to make those items the same height as shown in the first image, but I'm not sure how
my html
<div>
<Title message={"Your Top Artists"}/>
<div className="topArtists">
{toDisplay.map(item=>{
return(
<div className="items">
<li className="items-li" onClick={(e) => handleClick(e, item)}>
<Link to={`${path}/artist/${item.id}`}>
{item.name}, {item.followers}, {item.genres}, {item.popularity}
</Link>
</li>
</div>
)
})}
</div>
<button onClick={loadMore}> Load More </button>
</div>
And my Css
.topArtists{
/*width: 100%;*/
display: grid;
grid-template-rows: repeat(3, 250px);
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 15px;
}
.items {
border: 1px solid red;
}
.items-li{
padding: 10px;
font-size: 25px;
list-style: none;
}
Currently, you have set height for only 3 first rows. Use grid-auto-rows instead
.topArtists{
display: grid;
grid-auto-rows: 250px;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 15px;
}
I'm trying to create a page where I have 2 lists of buttons, each one in a div, side by side. I tried a CSS grid and flex, as you can see below. However, nothing seems to work, as the first div went all the way to the left margin and the other one under it.
How do I add some space to the left margin for the first column and from the half of the page for the second one?
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
button {
width: 120px;
height: 60px;
text-align: center;
text-decoration: none;
display: flex;
flex-direction: column;
font-size: 16px;
font color: black;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: white;
color: black;
border: 2px solid #CC0000;
}
<div class="grid-container">
<div class="grid-child">
<a href="createCl.php"> <button style="color: #000000; text-decoration: none;">
<strong>Aggiungi</strong></button></a>Aggiungi</span> <br><br>
</div>
<div class="grid-child">
<a href="map.php"> <button style="color: #000000; text-decoration: none;">
<strong>Mappa</strong></button></a>Mappa Clienti</span>
</div>
</div><br>
I'm a big fan of using flex. So if you're not locked in on using grid, here's a solution:
https://codepen.io/oppo_oskar/pen/yLVJQeL
HTML:
<div class="grid-container">
<div class="left buttons">
<button>Left1</button>
<button>Left2</button>
<button>Left3</button>
<button>Left4</button>
</div>
<div class="right buttons">
<button>Right1</button>
<button>Right2</button>
<button>Right3</button>
<button>Right4</button>
</div>
</div>
CSS:
.grid-container
{
display: flex;
flex-direction: row;
}
.buttons {
display:flex;
flex-direction: column;
}
For quick reading on how flex works, you can check out this site:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
All your buttons must be inside a container, for example: <div class="grid-container">.
In CSS, grid-template-columns: ; defines how many columns you will have in your .grid-container.
For every 1fr that you type into grid-template-columns: ; a new column will be created.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
<div class="grid-container">
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
<button>Button4</button>
<button>Button5</button>
<button>Button6</button>
</div>
I hope it helped a bit, please let me know. ^^'
This question already has answers here:
Prevent content from expanding grid items
(3 answers)
Closed 5 years ago.
I am working on switching my site to CSS Grid. I found an unexpected behavior.
I have a simple CSS-Grid layout header spanning two columns the next row has the side navigation with a fixed size, and the main content using the remaining space.
In the main element contains a pre tag with demo code. That pre is a rather long line, for some screen sizes it pushes the main area outside the browser view.
What I want is for the pre to have to scroll horizontally.
body {
margin: 40px;
}
pre {
overflow: auto;
background-color: #ffffff;
border: 1px solid #898989;
padding: 5px;
}
header {
background: #e1e1e1;
grid-area: header;
}
aside {
grid-area: aside;
background: #d7d7d7;
}
aside nav {
background: #e1e1e1;
}
aside nav ul {
list-style: none;
padding-top: 10px;
}
aside nav ul li {
margin-bottom: 10px;
}
main {
background: #c2c2c2;
grid-area: main;
}
.box {
border-radius: 5px;
padding: 20px;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-areas: "header header" "aside main";
grid-template-columns: 200px 1fr;
grid-template-rows: 110px 1fr;
}
<div class="grid">
<header class="box">
<h1>Site Name and Navigation Bar</h1>
</header>
<aside class="box">
<h1>Sidebar</h1>
<p>This is the sidebar. Might have secondary navigation elements.</p>
<nav>
<ul>
<li>Link to nowhere</li>
<li>Link to nowhere</li>
</ul>
</nav>
</aside>
<main class="box">
<h1>Main Content</h1>
<p>The following <code>pre</code> element will be too large for our grid. It will not have a horizontal scrollbar if it has lines that exceed its width.</p>
<h2>Darn Pre</h2>
<pre><code><html>
<body>
<p>I like long sentences and can not lie. Look at it it's so big. That make your page to be far to wide. I want to get horizontal with the freaky line. My homeboys tried to warn me that pre can make you layout funky.
</p>
</body>
</html>
</code></pre>
<main>
</div>
codepen with demo of this problem
A Pre tag will try and fill all available space. The fix is to limit it in some way.
I fixed this by adding another 1fr column and having main span that.
.grid {
display: grid;
grid-gap: 10px;
grid-template-areas: "header header header" "aside main main";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 110px 1fr;
}
Codepen example showing my fix