I am having trouble centering a heading and text element in a 2x2 grid. I have already tried using justify-content/items/self on the parent container ".skills", and the child-elements ".skills-item". Also, note that the grid is inside a flex container, I do not know if that has anything to do with it but I am clueless.
.about {
display: flex;
flex-direction: column;
align-items: center;
padding: 12.8rem 8rem 6.4rem 8rem;
background-color: #ebebff;
}
.backstory {
display: flex;
flex-direction: column;
align-items: center;
width: 60rem;
margin-bottom: 4.8rem;
text-align: center;
}
.skills {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 4.8rem;
column-gap: 6.4rem;
justify-items: center;
}
.skills-item {
display: inline-block;
}
<section class="about">
<div class="backstory">
<h2>Hi, I'm Mayitu Wangala</h2>
<p>
I'm a software developer. I became interested in computer science in college and became immersed in the world of IT. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci.
</p>
</div>
<div class="skills">
<!--Rename/regroup skills later-->
<div class="skills-item 3-lang">
<h3 class="skills-heading">HTML, CSS, Javascript</h3>
<p>
My knowledge of HTML, CSS, and javascript allows me to create beautiful, responsive projects and websites.
</p>
</div>
<div class="skills-item python">
<h3 class="skills-heading">Python</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci
</p>
</div>
<div class="skills-item data-structures">
<h3 class="skills-heading">Data Structures</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci
</p>
</div>
<div class="skills-item design">
<h3>Design</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci
</p>
</div>
</div>
</section>
You should set the parent class as flexbox in order to align the child elements as you wish.
.skills-item{
display:flex;
}
Since the text inside p tags won't seem like centered, even if it is, you can try to use text-align:center;.
Related
I was trying to make a chat UI with some actions that show in an overlay, but the buttons got chopped off. Here's what I tried to do:
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
I'm looking for something that looks like a grid, and would get longer if more buttons were added.
If I set flex-direction to row instead, it works fine, but that makes the buttons not be stacked. If I remove overflow: hidden I can see the buttons outside of the overlay, instead of it staying inside of the box. If I set a width for the overlay, things work fine, but I want the width to be dynamic.
Is this what you are looking for?
What I did was made the parent container display: flex; so it will expand to the size of the child div .overlay, then simply made the overlay a grid with only 1 column in order to have the buttons in 1 column.
.parent {
position: relative;
background: #111;
color: white;
height: 100%;
display: flex;
}
.overlay {
background: purple;
display: grid;
grid-template-columns: 1fr;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
EDIT: ok maybe this is what you want?
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
OK last edit then im giving up if this isn't it:
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
display: flex;
}
.overlay {
background: purple;
display: inline-block;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.'
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
Try giving the parent a fixed height, based on the height of the buttons. For example if I try: height: 100px; then I can see the buttons just fine as a vertical grid to the right of the text.
#container{
display:flex;}
#x, #y{
display:flex;}
<div id='container'>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
</div>
<div>
<div id='x'>
<button>
A
</button>
<button>
B
</button>
</div>
<div id='y'>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
</div>
Got this to work with grid:
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
Flex can do it.
Make three minor adjustments to your CSS code. (No changes to HTML.)
.parent {
position: relative;
/* overflow: hidden; */ /* 1 */
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
/* flex-direction: column; */ /* 2 */
flex-wrap: wrap;
}
button {
flex-basis: 50%; /* 3 */
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
How do I make the image go under the text in the mobile? And for the text to go on the left side, instead of being more on the right - if this makes sense :)
CSS (Image): https://pastebin.com/pGBdbBhs
CSS (Content): https://pastebin.com/1SY2JXUa
HTML:
<div class="content">
<div class="left-200">
<div>
<h3>Lorem ipsum</h3>
<div class="padding-4"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, natus pariatur aut soluta sed consectetur deleniti tempore ducimus at quas officia, deserunt eaque magni!</p>
</div>
<div class="padding-10"></div>
<img src="./images/default-image.png" alt="Image" class="image"/>
</div>
</div>
Desktop:
Mobile:
Thank you!
To make a responsive design you can either go the bootstrap root or you can do the #media in the CSS. Take a look at this site which will point you in the right direction.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I solved it! Basically I wrapped it up in a div and set display:none; if the device was on mobile. And I did the same thing for desktop!
Your CSS and HTML looks a little random here and there. For example those padding divs. Also your .left-200 class has two display properties. I would recommend to clean it up and then add the paddings, margins etc.
You really only need display: flex and flex-wrap for this task and set the other values like width accordingly.
.content {
padding: 200px 50px;
display: flex;
flex-wrap: wrap;
}
#flex-text {
width: 400px;
}
<div class="content">
<div id="flex-text">
<h3>Lorem ipsum</h3>
p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <!--
-->Eius, natus pariatur aut soluta sed consectetur deleniti tempore ducimus at quas officia, deserunt eaque magni!</p>
</div>
<div id="flex-image"> <img src="./images/default-image.png" alt="Image" class="image"/> </div>
</div>
Like at picture above I need such layout. DIV1 contains static text and to DIV2 data (text) coming from other files (EX.JSON) so it's variable. The point is to keep both divs always with same height based on height of heigher div.
Note: I don't want this with float.
Image courtesy: One of Test I Given Online.
Hi
You can do this easly with CSS3 Flexbox like you asking.
Solution
Here is snippet with working example. I used Flexbox and detalils you have in comments in the code.
#main {
/*Styles for sample presentation*/
padding: 20px;
border: 1px solid tomato;
}
#wrapper {
display: flex;
flex-flow: row wrap;
/* The remaining place (horizontaly) will be spread out around divs in wrapper. */
justify-content: space-around;
/*Styles for sample presentation*/
border: 1px solid royalblue;
}
#wrapper>header {
/* To keep header 100% width. */
flex: 0 0 100%;
text-align: center;
/*Styles for sample presentation*/
background-color: sandybrown;
}
#wrapper>div {
margin: 10px;
padding: 20px;
/* To center the text vertically. */
display: flex;
flex-flow: column nowrap;
justify-content: center;
/*Styles for sample presentation*/
border: 1px solid maroon;
text-align: justify;
}
#text-static {
/*Low flex basis values to keep it next to each other divs*/
flex: 1 0 30%;
}
#wrapper>div#text-json {
/*Low flex basis values to keep it next to each other divs*/
flex: 0 0 25%;
margin-left: 0;
}
<div id="main">
<div id="wrapper">
<header>
Sample header
</header>
<div id="text-static">
Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym,
pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji
druków na komputerach osobistych, jak Aldus PageMaker
</div>
<div id="text-json">
a Lorem Ipsum a Lorem Ipsum a Lorem Ipsum
</div>
</div>
</div>
If you want to try case when right div has more text than left you can edit same snippet as above there.
Knowledge
More informations about CSS3 Flexbox you have e.g. on this W3Schools site.
A nice learning tool that I found recently flexboxfroggy.com .
Hope that was helpful.
Cheers
Here is my implementation using CSS Grid which in my opinion makes this a lot easier especially when working with layouts. I am using SASS for styling. I hope this helps. Here is a link of the snippet on codepen.io
HTML CODE
<div class="main-div">
<div class="wrapper-div">
<div class="sample-header">Header</div>
<div class="div1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta blanditiis, error dolorem, velit tempora, magni ea officiis itaque voluptates aliquid consectetur deserunt quisquam tenetur dolor! Labore assumenda iusto debitis autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, velit cumque quaerat optio vero sed dolores maxime dolorum aut itaque? Asperiores, esse. Nihil dignissimos nisi debitis molestiae facilis accusamus non! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto quisquam corrupti error nesciunt pariatur quidem, voluptates similique obcaecati magni aperiam autem aliquam ex, ducimus, distinctio amet labore vel blanditiis sapiente. </div>
<div class="div2">Little bit of text here </div>
</div>
</div>
CSS STYLES USING CSS GRID
.main-div{
border:1px solid #000;
width:500px;
margin:0 auto;
padding:10px;
.wrapper-div{
display: grid;
grid-gap: 10px;
grid-template-columns: 3fr 1fr;
background-color: #fff;
// align-items:center;
color: #444;
margin:10px 0;
.sample-header {
grid-column: 1 / 3;
grid-row: 1;
background-color:lightgrey;
padding:10px;
text-align:center;
}
.div1,.div2{
border:1px solid #000;
padding:10px;
display:grid;
align-items:center;
}
.div1 {
grid-column: 1 ;
grid-row: 2 ;
}
.div2 {
grid-column: 2;
grid-row: 2;
}
}
}
https://codepen.io/anon/pen/OQZNgX
On the container for Div 1 & Div 2 apply this CSS
display: flex;
justify-content: center;
And then on the child divs, use flex-basis to specify their width
flex-basis: 75%;
/* and / or */
flex-basis: 25%;
See above code pen link for a working demo!
You can use bootstrap to achieve this... You can see below code for this type of design.
<div class='container'>
<div class='col-md-12 customHeaderclass'>
Your header
</div>
<div class='row'>
<div class='col-md-8'>
Your big content
</div>
<div class='col-md-4'>
Your small content
</div>
</div>
</div>
I hope this code will help you
Thanks & Regards.
I'm trying to create masonry layout using css grid layout. All items in grid have variable heights. And I don't know what items will be. So I can't define grid-row for each item. Is it possible to start each new item right after end of previous in column?
Code I'm trying:
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 330px);
align-items: flex-start;
grid-column-gap: 10px;
grid-row-gap: 50px;
}
.item {
background: black;
border-radius: 5px;
}
<div class="wrapper">
<div class="item" style="height:50px"></div>
<div class="item" style="height:100px"></div>
<div class="item" style="height:30px"></div>
<div class="item" style="height:90px"></div>
<div class="item" style="height:80px"></div>
<div class="item" style="height:50px"></div>
<div class="item" style="height:70px"></div>
<div class="item" style="height:40px"></div>
</div>
full codepen here
In your question you are setting the height of each item individually. If you are happy to do this then a Masonry layout can easily be achieved with grid.
Instead of setting a height for each item set grid-row-end so that each item spans a certain number of rows.
<div class="item" style="grid-row-end: span 5"></div>
The height of the item will then depend on the values of grid-auto-rows and grid-row-gap you have set for the grid.
I have made a Codepen here: https://codepen.io/andybarefoot/pen/NaprOB
If you don't want to individually set the grid-row-end value for each item you can use a bit of JavaScript to do it dynamically. I put another "container" div inside each item and measure the height of this container to calculate how many rows the item needs to span. I do this on page load, and again for each item when any images are loaded (as the height of the content will have changed). If you combine this approach with a responsive layout then you should also recalculate on page resize as the width of the columns may have changed and this will affect the height of the content.
Here's my full example with responsive column resizing: https://codepen.io/andybarefoot/pen/QMeZda
If you have items with variable widths you can still achieve a similar effect but the packing of the grid won't be perfect and the item order may be changed to optimise the packing.
I wrote a blog on Medium about this approach in case it is of interest: A Masonry style layout using CSS Grid
You can set span values for grid-row-end dynamically (with a bit of JS, like the one based on my Codepen experiment in the example below) and use the dense keyword for grid-auto-placement:
const gridStyles = getComputedStyle(document.querySelector('.wrapper',null));
const rowHeight = parseInt(gridStyles.getPropertyValue('--grid-row-height'));
const gap = parseInt(gridStyles.getPropertyValue('--grid-gutter'));;
let makeGrid = function() {
let items = document.querySelectorAll('.item');
for (let i=0, item; item = items[i]; i++) {
// take an item away from grid to measure it
item.classList.add('is-being-measured');
let height = item.offsetHeight;
// calcylate the row span
let rowSpan = Math.ceil((height + gap)/(rowHeight + gap));
// set the span value for grid-row-end
item.style.gridRowEnd = 'span '+rowSpan;
// return the item into the grid
item.classList.remove('is-being-measured');
}
}
window.addEventListener('load', makeGrid);
window.addEventListener('resize', () => {
clearTimeout(makeGrid.resizeTimer);
makeGrid.resizeTimer = setTimeout(makeGrid, 50);
});
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 330px);
--grid-gutter: 10px;
grid-gap: var(--grid-gutter);
--grid-row-height: 10px;
grid-auto-rows: var(--grid-row-height);
grid-auto-flow: row dense;
position: relative;
}
.item {
background: black;
color: white;
border-radius: 5px;
}
.item.is-being-measured {
/* temporary styles for measuring grid items */
position: absolute;
width: 330px;
top: 0;
left: 0;
}
.item > * { margin-left: 20px; }
<div class="wrapper">
<div class="item"><h3>1.1</h3><p>1.2</p></div>
<div class="item"><p>2.1</p><p>2.2</p><p>2.3</p><p>2.4</p><p>2.5</p></div>
<div class="item"><h2>3.1</h2></div>
<div class="item"><h2>4.1</h2><p>4.2</p><p>4.3</p><p>4.4</p></div>
<div class="item"><p>5.1</p><p>5.2</p><p>5.3</p><p>5.4</p></div>
<div class="item"><h2>6.1</h2><p>6.2</p></div>
<div class="item"><h2>7.1</h2><p>7.2</p><p>7.3</p></div>
<div class="item"><p>8.1</p><p>8.2</p></div>
</div>
This is one way to create the Masonry layout using only CSS.
*,
*:before,
*:after {
box-sizing: border-box !important;
}
article {
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}
section {
display: inline-block;
margin: 0.25rem;
padding: 1rem;
width: 100%;
background: #efefef;
}
p {
margin: 1rem 0;
}
body {
line-height: 1.25;
}
<article>
<section>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat architecto quis tenetur fugiat veniam iste molestiae fuga labore!</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.</p>
</section>
<section>
<p>Lorem ipsum dolor sit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.</p>
</section>
</article>
Note: I didn't made the code, I found it an made some small adaptation,
the original code can be found here.
Please note that, as pointed out by Zen:
[...] the items are laid out top-to-bottom, left-to-right,
whereas what one usually expects (cultural assumptions excused) is
left-to-right, top-to-bottom layout. This is the showstopper for the usual CSS3-columns-based recommendations.
You can accomplish this with column.
.wrapper {
column-gap: 10px;
column-count: 4;
}
.item {
display: inline-block;
background: #000;
width: 100%;
border-radius: 3px;
}
It looks like you were trying to use a combination of flex and grid, which may have been confusing things. As far as I know, flex is relative to the rest of the items on the page, where setting a column affects items falling into those columns.
updated codepen
I've attached an illustration to help me get my point across!
So, DIV 1 and DIV 2 (children of PARENT DIV) are columns on a page I'm building, and the content within them is not of the same height, so currently their buttons do not line up vertically.
I need to vertically align BUTTON 1 and BUTTON 2 (I guess to the bottom of PARENT DIV?);
How do I go about this please?
Thanks!
I don't think you can get away from the position CSS directive, but if you don't want to use bottom, there are numerous jQuery examples that will allow you to logically place your divs.
Alternately (and I know you seem to want to use Divs) but you may be able to use a table easier.
You can apply position relative and a bottom padding in DIV 1 and DIV 2 to prevent its content to overlap the buttons, whose position should be absolute (maybe bottom: 10px according to your screenshot).
Example: jsfiddle.net/yy87qdmt/1/
Tested & proofed in firefox-45 and chrome-50
<body>
<main>
<style scoped>
main
{
flex-direction: row;
display: flex;
}
main > figure
{
border: 1px darkgrey solid;
justify-content: flex-end;
flex-direction: column;
box-sizing: border-box;
display: flex;
}
main > figure > :first-child
{
background-color: lightgrey;
flex-grow: 1;
}
main > figure > figcaption
{
background-color: black;
color: lightgrey;
flex-shrink: 1;
}
</style>
<figure>
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
<figcaption>
Caption 0
</figcaption>
</figure>
<figure>
<article>
<p>Lorem ipsum dolor sit amet cosectetur...</p>
<p>...Lorem ipsum dolor sit amet cosectetur...</p>
<p>...Lorem ipsum dolor sit amet cosectetur</p>
</article>
<figcaption>
Caption 1
</figcaption>
</figure>
</main>
</body>
Flexbox can do that.
.row {
display: flex;
width: 80%;
margin: auto;
}
.col {
width: 50%;
border: 1px solid grey;
text-align: center;
padding: 1em;
}
img {
width: auto;
max-height: 100%;
}
p {
text-align: justify;
}
/* the magic */
.col {
display: flex;
flex-direction: column;
}
button {
margin-top: auto;
}
<div class="row">
<div class="col">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, dignissimos.</p>
<button>My button</button>
</div>
<div class="col">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae excepturi autem laborum veritatis ipsam odio itaque, dolorem modi ipsum voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque assumenda error blanditiis aliquam
repellendus, necessitatibus doloribus ipsa eveniet natus laborum.</p>
<button>My button</button>
</div>
</div>