#grid {
display: grid;
grid: auto / repeat(3, 1fr);
width: 300px;
height: 100px;
}
#grid div {
border: 1px dashed black;
border-radius: 12px;
height: 100%;
}
#grid div:nth-child(2) {
margin-top: 20px;
}
#grid div:nth-child(3) {
margin-top: 40px;
}
<div id="grid">
<div></div>
<div></div>
<div></div>
</div>
The problem with my snippet is that meeting borders overlap. If I try to fix that by applying negative margin -1px, it looks okay, but the now "merged" borders display as solid on some screens.
I'd like to:
merge meeting borders
avoid merged borders from appearing solid
All without targeting specific children of the grid.
What you can do is disable the right border for all childs except the last one so each one would have only one border which will not merge.
#grid {
display: grid;
grid: auto / repeat(3, 1fr);
width: 300px;
height: 100px;
}
#grid div {
border: 1px dashed black;
border-radius: 12px;
height: 100%;
margin-right: -1px;
}
#grid div:nth-child(2) {
margin-top: 20px;
}
#grid div:nth-child(3) {
margin-top: 40px;
}
<div id="grid">
<div></div>
<div></div>
<div></div>
</div>
EDIT:
Check if this works as you expect.
after applying margin-right: -1px it works and the borders dont even look solid
Related
I'm pretty new to coding, and I'm trying to use a grid.
But I got stuck a little bit.
I have the following codePan project:
* {
box-sizing:border-box
}
body {
height:100vh;
width: 100%;
background-color: red;
padding:0;
margin:0;
}
#wrapper {
background-color:blue;
height:100%;
width:100%;
margin:0;
padding:0;
display: grid;
grid-template-areas:
"nav"
"content"
"footer" ;
grid-template-columns: 1fr;
grid-template-rows: .8fr 1fr .8fr ;
}
#nav {
background-color: yellow;
grid-area: "nav";
position: sticky;
top: 0;
}
#content {
background-color: pink;
grid-area: "nav";
display:flex;
flex-direction: column;
}
footer {
background-color: brown;
grid-area: "nav";
}
#box1 {
background-color:purple;
height:50%;
}
#box2 {
background-color: blue;
height:60%;
display:flex;
flex-direction: column;
}
.image {
height: auto;
width: 400px;
position: relative;
top:-150px;
}
button {
height: 90px;
width: 400px;
background-color: #262A58;
color: white;
font-size: 1.5em;
font-family: 'EightOne';
border-radius: 10px;
border-style: none;
cursor: pointer;
}
<div id="wrapper">
<div id="nav"> nav </div>
<div id="content">
<div id="box1">
<h1>flower</h1>
</div>
<div id="box2">
<img class="image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.goldpetal.net%2Fmedia%2Fimages%2Fproduct_gallery%2FGerbera_Flower_12.jpg&f=1&nofb=1" alt="">
<button> buy flower </button>
</div>
</div>
<footer>
footer
</footer>
</div>
what i want is the similar like on this picture:
picture
unfortunatly i can not postitioning, the contents in the Box2, becuase the button goes out completly out from grid.
I tried several options, but at the end it was always some issue with the content in the Box2.
if someone could give me an advice. Probably I'm using wrong way Grid...
Thank you!
Let your grid define the size of the areas, and use Flexbox to lay out your content.
You can absolutely achieve this layout with CSS Grid. The button was overflowing its content area because #box2 has a fixed height of 60% of the content grid area, but your .image and the button are taller than that. Basically your image pushes down the button.
You don’t need to set explicit heights on your content, because that’s taken care of the grid.
The white-blue background is a bit tricky, because it doesn’t align exactly with the edges of your image. But you can achieve this affect with a background gradient on your content container.
Check out this working solution as inspiration:
body {
height: 100vh;
padding: 0;
margin: 0;
}
#wrapper {
height: 100%;
width: 100%;
display: grid;
grid-template-areas:
'nav'
'content'
'footer';
grid-template-columns: 1fr;
grid-template-rows: 64px 1fr 96px;
}
#nav {
grid-area: nav;
position: sticky;
top: 0;
background-color: white;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
#content {
grid-area: content;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(to bottom, transparent 60%, #aad 60%);
align-items: center;
padding: 32px;
}
#content .wrapper {
display: flex;
flex-direction: column;
width: 400px;
}
footer {
grid-area: footer;
}
.image {
border: solid 16px #aad;
margin: 16px;
}
button {
padding: 8px 16px;
background-color: #262a58;
color: white;
font-size: 1.5em;
font-family: 'EightOne';
border-radius: 10px;
border-style: none;
cursor: pointer;
margin-top: 32px;
align-self: center;
}
<div id="wrapper">
<div id="nav">nav</div>
<div id="content">
<div class="wrapper">
<h1>flower</h1>
<img
class="image"
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.goldpetal.net%2Fmedia%2Fimages%2Fproduct_gallery%2FGerbera_Flower_12.jpg&f=1&nofb=1"
alt="Flower"
/>
<button>buy flower</button>
</div>
</div>
<footer>footer</footer>
</div>
Grid is not really used to make a full webpage. Everything is automatically stacked on top of eachother and should not have a fixed height. The height should changed based on the content.
When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.
I have a fiddle, please check it here: https://jsfiddle.net/p2oe6s7w/
I need the green box to stretch horizontally and take all the remaining space from the yellow box which has fixed width. I can gain it only setting up the green box say 90% of width which I don't like because it's always different - https://jsfiddle.net/p2oe6s7w/1/ . I just want these 2 blocks staying side by side.
.left {
background: green;
border: 1px solid blue;
float: left;
width: 90%;
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
float: left;
}
<div class="container">
<div class="left">
<pre>
dkdkdkd
dkdkdkdkd
fjfjf
fjfjfj
</pre>
</div>
<div class="right">
<button>
dfdf
</button>
</div>
</div>
Another thing to know is there is a list of containers setting vertically. So I don't think that absolute positions would work.
Pure css only please.
Simply use flex like this:
.container {
display: flex;
align-items: flex-start;
}
.left {
background: green;
border: 1px solid blue;
flex: 1; /* This will make your element fill the remaining space*/
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
}
<div class="container">
<div class="left">
<pre>
dkdkdkd
dkdkdkdkd
fjfjf
fjfjfj
</pre>
</div>
<div class="right">
<button>
dfdf
</button>
</div>
</div>
You can use this CSS:
html, body {
margin: 0;
}
* {
box-sizing: border-box;
}
.left {
background: green;
border: 1px solid blue;
float: left;
width: calc(100% - 60px);
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
float: left;
}
The essential line is width: calc(100% - 60px);, i.e. the full width minus the width of the yellow DIV, but you also need the other stuff ( box-sizing: border-box; etc.) to make everything fit.
https://jsfiddle.net/mLkjv565/1/
Use below css
.left {
background: green;
border: 1px solid blue;
float: left;
width: calc(100% - 60px);
}
.right {
background: yellow;
width: auto;
border: 1px solid red;
float: left;
}
Please check it here. fiddle
I have a requirement that there are 4 boxes in one row.
the boxes have fixed width and height
but the width of the row will change by screen size.
the first box should be aligned to the left border of the row
last box aligned to right border.
Also the space between any two boxes should be equal.
Is there a pure CSS way to make that happen? Here is the jsfiddle code.
HTML:
<div class="row">
<div class ="col">
<div class="box"></div>
</div>
<div class ="col">
<div class="box"></div>
</div>
<div class ="col">
<div class="box"></div>
</div>
<div class ="col">
<div class="box"></div>
</div>
</div>
CSS:
.row {
display: table;
border: 1px solid green;
width: 400px; /* it changes by screen size actually */
padding: 5px;
}
.row:before, .row:after {
content: "";
}
.row:after {
clear: both;
}
.col {
float: left;
width: 25%;
}
.box {
border: 1px solid #DDD;
width: 80px;
height: 80px;
margin: 0 auto;
}
.col:first-child .box {
margin-left: 0;
}
.col:last-child .box {
margin-right: 0;
}
Use text-align:justify on the container, this way it will work no matter how many elements you have in your div (you don't have to work out % widths for each list item
Updated CSS
.row {
text-align: justify;
min-width: 412px;
border: 1px solid green;
width: 80%; /* it changes by screen size actually */
height: 90px;
padding: 5px;
}
.row:after {
content: '';
display: inline-block;
width: 100%;
}
.col {
display: inline-block;
}
.box {
border: 1px solid #DDD;
width: 80px;
height: 80px;
margin: 0 auto;
}
FIDDLE
You can make use of css3 flex boxes which is supported in modern browsers.
.row {
display: flex;
justify-content: space-between;
border: 1px solid green;
}
.box {
border: 1px solid #DDD;
width: 80px;
height: 80px;
}
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
jsfiddle demo
more about flex boxes # css tricks
Why not use flexbox ?
Demo
css
.flex-container {
padding: 5px;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-between; /* this make the end divs at sides and equal space between other divs */
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
html
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
Read here for more detail on flexbox
you simply have to remove the padding attribute from the following
.row {
display: table;
border: 1px solid green;
width: 400px; /* it changes by screen size actually */
/*padding: 5px;*/
}
here is the demo.
Let me know if this was helpful or if you have anymore queries.
When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.