CSS3 Border/gap around grids - css

What code do I need to add to remove the gap between grid items and the edge of the browser window? I'm new to grids and CSS, so go easy on me.
I don't want the white border around the grid;
https://codepen.io/grabthereef/pen/YrpqGP
.wrapper{
display: grid;
grid-template-columns: 2fr 2fr;
}
.wrapper > div{
background:#ee0;
}

Add below code to your css file :
body{
margin: 0;
}
It will remove that space around.

It is as simple as putting this piece of code in you css fie.
body {
margin: 0px;
padding: 0px;
}
Working snippet
body {
margin: 0px;
padding: 0px;
}
.wrapper {
display: grid;
grid-template-columns: 2fr 2fr;
}
.wrapper>div {
background: #ee0;
}
<div class="wrapper">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, nam.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, quia.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, nam.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, quia.
</div>
</div>

Related

How to apply a CSS style to last visible word or row of text in div?

I am trying to apply a css style to last visible row of text in a div, which has overflow hidden. I tried #content:not([style*="display: none"]):last-child {color: red;}, but it is not working. Is there any css method for this?
<body>
<div id="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, deleniti.lorem10Lorem ipsum dolor
sit amet consectetur, adipisicing elit. Harum, deleniti.lorem10Lorem ipsum dolor sit amet consectetur,
adipisicing ellit. Harum, deleniti.lorem10lit. Harum, deleniti.lorem10it. Harum, deleniti.lorem10lit. Harum,
deleniti.lorem10lit. Harum, deleniti.lorem10lit. Harum,
deleniti.lorem10</div>
</body>
<style>
#content {
margin: auto;
width: 50%;
border: 1px solid lightgrey;
height: 2.5em;
overflow: hidden;
}
#content:not([style*="display: none"]):last-child { color: red;}
</style>
I found this vidéo : https://www.youtube.com/watch?v=82f07Xf0xgE
I think is more simple.

Flexbox: Removing blank space after applying media query

Do you know why, when I resize my browser down and the flex direction is changed to columns, that my images and text no longer sits in the middle and looks left aligned? There's a huge space on the right hand side and I want the content to always sit in the center no matter what size the browser is. I used the obvious tricks like left-align and center etc, but the space remains.
Code below:
HTML:
<body>
<div class="container">
<div class="products">
<div class="product product-1">
<img src="images/product-1.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
<div class="product product-1">
<img src="images/product-2.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
<div class="product product-1">
<img src="images/product-3.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
</div>
</div>
</body>
CSS:
.container {
width: 95%;
max-width: 1280px;
margin: 0 auto;
}
img {
max-width: 100%;
width: 400px;
}
.products {
display: flex;
justify-content: space-evenly;
}
.product-1 {
width: 33%;
margin: 0 0.50em;
}
#media (max-width: 600px) {
.products {
flex-direction: column;
}
.product-1 {
width: 100%;
}
p {
width: 75%;
}
}
You should use flexbox in your product-1 to center items
.product-1 {
display: flex;
flex-flow: column;
align-items: center;
width: 100%;
}
.container {
width: 95%;
max-width: 1280px;
margin: 0 auto;
}
img {
max-width: 100%;
width: 400px;
}
.products {
display: flex;
justify-content: space-evenly;
}
.product-1 {
width: 33%;
margin: 0 0.50em;
}
#media (max-width: 600px) {
.products {
flex-direction: column;
}
.product-1 {
display: flex;
flex-flow: column;
align-items: center;
width: 100%;
}
p {
width: 75%;
}
}
<body>
<div class="container">
<div class="products">
<div class="product product-1">
<img src="images/product-1.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
<div class="product product-1">
<img src="images/product-2.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
<div class="product product-1">
<img src="images/product-3.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
</div>
</div>
</body>

CSS only layout like masonry [duplicate]

This question already has answers here:
CSS-only masonry layout
(4 answers)
How to wrap flexbox over multiple rows and columns?
(3 answers)
Closed 4 years ago.
Question:
Is there any way to make layout like left to right masonry without JS?
! Please note I do not need exactly masonry, it works a bit different way !
Required:
Left to right order;
Each item goes to next column (items in masonry can pick columns out of order if available space on higher position);
Height is not fixed;
I can't change original order (1,2,3... but not 1,4,7...).
Example:
This one solution is almost what I looking for, but order is broken - example
HTML:
<div class="masonry">
<div class="item">1. (should be #1) ...</div>
<div class="item">2. (should be #4) ...</div>
<div class="item">3. (should be #7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="item">4. (should be #2) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
<div class="item">5. (should be #5) Lorem ipsum dolor sit asonsfd foindfosindf met, consectetur adipisicing elit.</div>
<div class="item">6. (should be #8) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
<div class="item">7. (should be #3) Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="item">8. (should be #6) Lorem ipsum adipisicing elit. Lorem ipsum dolor sit elit</div>
<div class="item">9. (should be #9) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
</div>
CSS:
body {
font: 1em/1.67 'Open Sans', Arial, Sans-serif;
margin: 0;
background: #e9e9e9;
}
.wrapper {
width: 95%;
margin: 3em auto;
}
.masonry {
margin: 1.5em 0;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
text-align:left;
font-size: .85em;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.item {
display: inline-block;
background: #fff;
padding: 1em;
margin: 0 0 1.5em;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 2px 2px 4px 0 #ccc;
}
When ordering your html divs, you have to think differently.
If you draw your grid on a piece of paper, you can then draw rings around the columns and you get:
You want this:
1, 2, 3
4, 5, 6
7, 8, 9
You have to order like this:
1, 4, 7
2, 5, 8
3, 6, 9
Just re-order your html lines from columns to rows, like so:
<div class="masonry">
<div class="item">1. (should be #1) ...</div>
<div class="item">4. (should be #2) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
<div class="item">7. (should be #3) Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="item">2. (should be #4) ...</div>
<div class="item">5. (should be #5) Lorem ipsum dolor sit asonsfd foindfosindf met, consectetur adipisicing elit.</div>
<div class="item">8. (should be #6) Lorem ipsum adipisicing elit. Lorem ipsum dolor sit elit</div>
<div class="item">3. (should be #7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="item">6. (should be #8) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
<div class="item">9. (should be #9) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
</div>

Avoid resize a section while resizing the screen

When a resize the screen, the text get another size.
I wan't to avoid this and show a scroll bar.
Could you help me please ?
This is my code :
article {
width: 100%;
height: 100%;
}
section.apropos {
background-color: white;
color: #666666;
font-family: Calibri;
height: 100%;
width: auto;
padding-top: 95px;
padding-left: 20%;
padding-right: 20%;
text-align: justify;
min-width: auto;
min-height: auto;
}
<header>
<nav>
<ul>
<li><a> Notre entreprise</a></li>
<li class="m"><a> Nous connaitre</a></li>
<li class="m"><a onclick='onLinkClick()'>Nos métiers</a></li>
<li class="m"><a>Nous contacter</a></li>
</ul>
</nav>
</header>
<body>
<article>
<section class="apropos">
<h1> A PROPOS DE NOUS </h1> <br/>
<p> Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur</p>
<p> Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur</p>
</section>
<section class="NotreMetier" id="NotreMetier">
</section>
</article>
</body>
Thanks in advance.
Use width: and height: to make it fixed (400px and 300px in my example).
Optionally use overflow: scroll; to give your element scrollbars if the content is bigger than its size.
article {
width: 400px;
height: 300px;
overflow: scroll;
}
section.apropos {
background-color: white;
color: #666666;
font-family: Calibri;
width: auto;
padding-top: 95px;
padding-left: 20%;
padding-right: 20%;
text-align: justify;
}
<body>
<header>
<nav>
<ul>
<li><a> Notre entreprise</a></li>
<li class="m"><a> Nous connaitre</a></li>
<li class="m"><a onclick='onLinkClick()'>Nos métiers</a></li>
<li class="m"><a>Nous contacter</a></li>
</ul>
</nav>
</header>
<article>
<section class="apropos">
<h1> A PROPOS DE NOUS </h1> <br/>
<p> Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur</p>
<p> Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur</p>
</section>
<section class="NotreMetier" id="NotreMetier">
</section>
</article>
</body>

Flexbox margin and offseting issue with stair effect

I have a problem with a layout I'm trying to achieve with flexbox. I'd like to offset my columns a little more than the previous one to have a diagonal/stairs effect, but I'd also like them to keep the same height grown to the tallest one as flexbox automagically provides.
At first, I thought to myself: I just need to make them the same height with flexbox and then offset them with margins, but it seems that vertical margins are handled quite differently with flexbox as they push the upper side of the box, but not the whole box... this results in all my columns having their bottoms aligned, but that's not what I'd like to achieve.
Note : I know this can be achieved many other ways like relative positioning, adding padding on the parent, setting a min-height, with JavaScript and others, but I'd like to keep the document flow intact, keep ignoring the object's sizes and avoid using JS. I've also read that an upcoming flex-gap or item-gap would probably solve such issues in the future, but it's still an open issue / idea in the CSS Working Group draft.
Here's a text doodle for documentation's perennity.
Flex Expected
- -
| - | -
| | - | | -
| | | | | |
- - - - | |
- |
-
Here's a live demo of what I want to achieve and the current result with flexbox spec :
*{
box-sizing:border-box;
}
.wrap{
display:flex;
flex-direction: row;
width: 100%;
}
.box{
flex:0 0 33%;
padding:0 10px;
}
.box:nth-child(2){
margin-top: 60px;
}
.box:nth-child(3){
margin-top: 120px;
}
.box-inner{
height: 100%;
text-align:center;
background:#ccc;
border-radius:10px;
padding: 20px;
box-shadow:5px 5px 15px rgba(0,0,0,0.2);
}
.wrap2{
overflow:hidden;
}
.box2{
float:left;
width:33%;
padding: 0 10px;
}
.box2:nth-child(2){
margin-top: 60px;
}
.box2:nth-child(3){
margin-top: 120px;
}
.box-inner2{
min-height:300px;
text-align:center;
background:#ccc;
border-radius:10px;
padding: 20px;
box-shadow:5px 5px 15px rgba(0,0,0,0.2);
}
<h2>Flexbox</h2>
<div class="wrap">
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>
<h2>Expected</h2>
<div class="wrap2">
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>
Thanks!
Play with bottom margin. See below.
* {
box-sizing: border-box;
}
.wrap {
display: flex;
flex-direction: row;
width: 100%;
}
.box {
flex: 0 0 33%;
padding: 0 10px;
}
.box:nth-child(2) {
margin-top: 60px;
margin-bottom: -60px;
}
.box:nth-child(3) {
margin-top: 120px;
margin-bottom: -120px;
}
.box-inner {
height: 100%;
text-align: center;
background: #ccc;
border-radius: 10px;
padding: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
.wrap2 {
overflow: hidden;
}
.box2 {
float: left;
width: 33%;
padding: 0 10px;
}
.box2:nth-child(2) {
margin-top: 60px;
}
.box2:nth-child(3) {
margin-top: 120px;
}
.box-inner2 {
min-height: 300px;
text-align: center;
background: #ccc;
border-radius: 10px;
padding: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
<h2>Flexbox</h2>
<div class="wrap">
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>
<h2>Expected</h2>
<div class="wrap2">
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>

Resources