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>
Related
I'm try to have 100vh viewport with multiple responsive overlay on top of that
Here is the code, I can make header element get fixed on the viewport with position sticky but for the rest that doesn't work
Also, I'm trying to use CSS Grid for this
Here is the code
body {
display: grid;
grid-template-columns: 1fr minmax(20em, 30vw);
grid-template-rows: clamp(3em, 10vh, 5em) 1fr clamp(7em, 20vh, 9em);
}
header {
background-color: #eee;
grid-column: 1 / end;
grid-row: 1 / 2;
}
main {
height: 100vh;
grid-column: 1 / end;
grid-row: 1 / end;
}
aside {
background-color: #ccc;
grid-column: 2 / end;
grid-row: 2 / end;
}
footer {
background-color: #444;
grid-row: 3 / end;
grid-column: 1 / end;
}
<body>
<header></header>
<main>
<section class="questions" id="objectives">
<h2>Objectives</h2>
<div class="question">
<h3>1. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>2. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>3. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>4. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>5. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>6. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>7. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>8. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>9. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
</section>
</main>
<aside></aside>
<footer></footer>
</body>
Codepen https://codepen.io/ikamy/pen/rNYwOwM
Please vertically minimize and then scroll
I'm trying to fix footer and aside without using position fixed or absolute
While the body is display Grid I'm trying to use with: 100vh on the body and make the other Grid elements sticks , and I only scroll on the main element
You need to use min-height:100vh instead of height:100vh
And then use position:sticky on element you want to be sticky with top or bottom.
body {
display: grid;
grid-template-columns: 1fr minmax(20em, 30vw);
grid-template-rows: clamp(3em, 10vh, 5em) 1fr clamp(7em, 20vh, 9em);
}
header {
background-color: #eee;
grid-column: 1 / end;
grid-row: 1 / 2;
}
main {
min-height:100vh;
grid-column: 1 / end;
grid-row: 1 / end;
}
aside {
background-color: #ccc;
grid-column: 2 / end;
grid-row: 2 / end;
position: sticky;
top: 0;
z-index:99999;
}
footer {
background-color: #444;
grid-row: 3 / end;
grid-column: 1 / end;
position: sticky;
bottom: 0
;
}
<body>
<header></header>
<main>
<section class="questions" id="objectives">
<h2>Objectives</h2>
<div class="question">
<h3>1. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>2. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>3. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>4. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>5. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>6. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>7. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>8. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
<div class="question">
<h3>9. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
<button>Yes</button><button>No</button>
</div>
</section>
</main>
<aside></aside>
<footer></footer>
</body>
For reference you may look at this question: 'position: sticky' not working when 'height' is defined
so i kinda new on web development scene and there is something i want to know how to make, here is the list that i want to make
https://i.imgur.com/PAQaJde.png
what is that bar thing called? and how to make it stay on top when i scrolled
https://i.imgur.com/ai0Vf2g.png
is this card or simple col that get styled using css?
sorry for the dumb question guys, i really kinda lost since i dont know how those thing called
1) Its called a navigation, or a navBar, and you position it absolute at 0,0 for it to stay up the top:
2) not sure what you are asking for your second question but to get it in that style. you can use CSS Grid, or FlexBox which are both native browser functionality.
Im happy to answer any further questions :)
welcome to the community
The first one is a navbar or navigation bar. You can make it stick to the top by setting position: fixed; top: 0; left:0; z-index:99;
nav {
position: fixed;
display: block;
top: 0;
left: 0;
height: 50px;
width: 100%;
padding: 10px;
background-color: #ccc;
}
.block {
display: block;
height: 1000px;
}
<nav>
Navbar
</nav>
<div class='block'>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
The second one you can achieve by nesting an element inst=ide another, applying a margin to the parent and border-radius to the child. It works with any layout style.
div{
border: solid 1px #ccc;
border-radius: 5px;
}
.container {
padding: 20px;
}
.card {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 20px;
}
.card-wide {
display: inline-block;
width: 150px;
height: 50px;
margin-top: 30px;
margin-right: 30px;
}
<div class='container'>
<h1>Content</h1>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<br />
<div class='card-wide'></div>
<div class='card-wide'></div>
<div class='card-wide'></div>
<div class='card-wide'></div>
</div>
Ok so here something that I can't find an easy way to deal with. I have a list of links, it can be tags for exemple or anything, and I want to display all of them separated by a separator. Here is an example.
The problem is that because elements are of an unknown length and need to break on mulline (a tag can have a long name for example), sometimes the separator is the first element of the line, it's uggly. Do you have any way to prevent this wrapping before the separator span?
.list {
font-size: 0;
line-height: 0;
max-width: 290px;
}
.list > * {
font-size: 14px;
line-height: 20px;
}
.list > span {
padding: 0 5px;
}
<div class="list">
Lorem
<span>/</span>
Ipsum
<span>/</span>
Lorem dolor ipsum amet dolor long foo bar baz lorem
<span>/</span>
Ipsum dolor amet
<span>/</span>
Lorem
<span>/</span>
Ipsum
<span>/</span>
Lorem ipsum
<span>/</span>
Dolor
<span>/</span>
Lorem dolor
<span>/</span>
Ipsum dolor amet
<span>/</span>
Lorem
<span>/</span>
Ipsum
<span>/</span>
Lorem ipsum
<span>/</span>
Dolor
<span>/</span>
Lorem dolor
<span>/</span>
Ipsum dolor amet
<span>/</span>
Lorem
<span>/</span>
Ipsum
<span>/</span>
Lorem ipsum
<span>/</span>
Dolor
<span>/</span>
Lorem dolor
<span>/</span>
Ipsum dolor amet
<span>/</span>
Lorem
<span>/</span>
Ipsum
<span>/</span>
Lorem ipsum
<span>/</span>
Dolor
<span>/</span>
Lorem dolor
<span>/</span>
Ipsum dolor amet
<span>/</span>
Lorem
<span>/</span>
Ipsum
<span>/</span>
Lorem ipsum
<span>/</span>
Dolor
<span>/</span>
Lorem dolor
<span>/</span>
Ipsum dolor amet
<span>/</span>
</div>
I hope this will helps you,
.list {
font-size: 0;
line-height: 0;
}
.list > * {
font-size: 14px;
line-height: 20px;
}
.list > .wrapper {
display: inline-block;
white-space: nowrap;
}
.list > .wrapper > span {
padding: 0 5px;
}
<div class="list">
<span class="wrapper">
Lorem
<span>/</span>
</span>
<span class="wrapper">
Ipsum
<span>/</span>
</span>
<span class="wrapper">
Lorem ipsum
<span>/</span>
</span>
<span class="wrapper">
Dolor
<span>/</span>
</span>
<span class="wrapper">
Lorem dolor
<span>/</span>
</span>
<span class="wrapper">
Ipsum dolor amet
<span>/</span>
</span>
<span class="wrapper">
Lorem
<span>/</span>
</span>
<span class="wrapper">
Ipsum
<span>/</span>
</span>
<span class="wrapper">
Lorem ipsum
<span>/</span>
</span>
<span class="wrapper">
Dolor
<span>/</span>
</span>
<span class="wrapper">
Lorem dolor
<span>/</span>
</span>
<span class="wrapper">
Ipsum dolor amet
<span>/</span>
</span>
<span class="wrapper">
Lorem
<span>/</span>
</span>
<span class="wrapper">
Ipsum
<span>/</span>
</span>
<span class="wrapper">
Lorem ipsum
<span>/</span>
</span>
<span class="wrapper">
Dolor
<span>/</span>
</span>
<span class="wrapper">
Lorem dolor
<span>/</span>
</span>
<span class="wrapper">
Ipsum dolor amet
<span>/</span>
</span>
<span class="wrapper">
Lorem
<span>/</span>
</span>
<span class="wrapper">
Ipsum
<span>/</span>
</span>
<span class="wrapper">
Lorem ipsum
<span>/</span>
</span>
<span class="wrapper">
Dolor
<span>/</span>
</span>
<span class="wrapper">
Lorem dolor
<span>/</span>
</span>
<span class="wrapper">
Ipsum dolor amet
<span>/</span>
</span>
<span class="wrapper">
Lorem
<span>/</span>
</span>
<span class="wrapper">
Ipsum
<span>/</span>
</span>
<span class="wrapper">
Lorem ipsum
<span>/</span>
</span>
<span class="wrapper">
Dolor
<span>/</span>
</span>
<span class="wrapper">
Lorem dolor
<span>/</span>
</span>
<span class="wrapper">
Ipsum dolor amet
<span>/</span>
</span>
<span class="wrapper">
Lorem
<span>/</span>
</span>
<span class="wrapper">
Ipsum
<span>/</span>
</span>
<span class="wrapper">
Lorem ipsum
<span>/</span>
</span>
<span class="wrapper">
Dolor
<span>/</span>
</span>
<span class="wrapper">
Lorem dolor
<span>/</span>
</span>
<span class="wrapper">
Ipsum dolor amet
<span>/</span>
</span>
</div>
You may use ::after, for example:
<div class="list">
<span>Lorem</span>
<span>Ipsum</span>
<span>Lorem ipsum</span>
<span>Dolor</span>
<span>Lorem dolor</span>
<span>Ipsum dolor amet</span>
<span>Lorem</span>
<span>Ipsum</span>
<span>Lorem ipsum</span>
<span>Dolor</span>
<span>Lorem dolor</span>
<span>Ipsum dolor amet</span>
<span>Lorem</span>
<span>Ipsum</span>
<span>Lorem ipsum</span>
<span>Dolor</span>
<span>Lorem dolor</span>
<span>Ipsum dolor amet</span>
<span>Lorem</span>
<span>Ipsum</span>
<span>Lorem ipsum</span>
<span>Dolor</span>
<span>Lorem dolor</span>
<span>Ipsum dolor amet</span>
<span>Lorem</span>
<span>Ipsum</span>
<span>Lorem ipsum</span>
<span>Dolor</span>
<span>Lorem dolor</span>
<span>Ipsum dolor amet</span>
<span>Lorem</span>
<span>Ipsum</span>
<span>Lorem ipsum</span>
<span>Dolor</span>
<span>Lorem dolor</span>
<span>Ipsum dolor amet</span>
<span>Lorem</span>
<span>Ipsum</span>
<span>Lorem ipsum</span>
<span>Dolor</span>
<span>Lorem dolor</span>
<span>Ipsum dolor amet</span>
<span>Lorem</span>
<span>Ipsum</span>
<span>Lorem ipsum</span>
<span>Dolor</span>
<span>Lorem dolor</span>
<span>Ipsum dolor amet</span>
</div>
.list {
font-size: 0;
line-height: 0;
}
.list > * {
font-size: 14px;
line-height: 20px;
}
.list > span {
white-space: nowrap;
}
.list > span::after {
display: inline-block;
content: '/';
padding: 0 5px;
}
https://jsfiddle.net/Lby5u1st/2/
There are a lot of ways to handle this. I'll give a few examples. The crux of the issue is that you're depending on HTML to style your webpage. HTML will handle the flow of content, but really it should just be providing semantic meaning to the page and not providing any stylistic decoration.
The content + pseudo element method
We can remove the separators from the HTML and add them via CSS instead using content. This will also allow us to not show a separator for the last item.
Then we can set our list items to be inline-block which will still allow them to flow together, and add no-wrap for our whitespace which will prevent the separator from appearing as the first item on the list.
.list {
font-size: 0;
line-height: 0;
}
.list > * {
display: inline-block;
font-size: 14px;
line-height: 20px;
white-space: nowrap;
}
.list > *:not(:last-child)::after {
content: '/';
display: inline-block;
margin: 0 5px;
}
<div class="list">
Lorem
Ipsum
Lorem ipsum
Dolor
Lorem dolor
Ipsum dolor amet
Lorem
Ipsum
Lorem ipsum
Dolor
Lorem dolor
Ipsum dolor amet
Lorem
Ipsum
Lorem ipsum
Dolor
Lorem dolor
Ipsum dolor amet
Lorem
Ipsum
Lorem ipsum
Dolor
Lorem dolor
Ipsum dolor amet
Lorem
Ipsum
Lorem ipsum
Dolor
Lorem dolor
Ipsum dolor amet
Lorem
Ipsum
Lorem ipsum
Dolor
Lorem dolor
Ipsum dolor amet
</div>
Just the pseudo element method
There's still an issue with the above code. Though we've removed the separators from the HTML we're still using content as styling. If a screen reader was to encounter the above markup it would read something like this: "Lorem forward slash Lorem ipsum forward slash Dolor forward slash, etc". HTML is meant to provide semantic meaning, and then we use CSS to provide styling so we can push this further by styling our pseudo element as the separator and removing it from the content attribute.
.list {
font-size: 0;
line-height: 0;
}
.list > * {
display: inline-block;
font-size: 14px;
line-height: 20px;
white-space: nowrap;
}
.list > *:not(:last-child)::after {
background-color: #000;
content: '';
height: .8em;
display: inline-block;
margin: 0 5px -2px;
transform: rotate(15deg);
width: 1px;
}
<ul class="list">
<li>Lorem</li>
<li>Ipsum</li>
<li>Lorem ipsum</li>
<li>Dolor</li>
<li>Lorem dolor</li>
<li>Ipsum dolor amet</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Lorem ipsum</li>
<li>Dolor</li>
<li>Lorem dolor</li>
<li>Ipsum dolor amet</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Lorem ipsum</li>
<li>Dolor</li>
<li>Lorem dolor</li>
<li>Ipsum dolor amet</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Lorem ipsum</li>
<li>Dolor</li>
<li>Lorem dolor</li>
<li>Ipsum dolor amet</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Lorem ipsum</li>
<li>Dolor</li>
<li>Lorem dolor</li>
<li>Ipsum dolor amet</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Lorem ipsum</li>
<li>Dolor</li>
<li>Lorem dolor</li>
<li>Ipsum dolor amet</li>
</ul>
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>
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>