Here's what I have so far:
.card {
padding: 1rem;
height: auto;
}
.cards {
max-width: 640px;
margin: 0 auto;
display: grid;
grid-gap: 32px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.cardTitle {
color: red;
font-size: 32px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
.cardDescription {
font-size: 18px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
#media (min-width: 768px) {
.cardTitle {
text-align: right;
}
.cardDescription {
text-align: left;
}
}
<div class="cards">
<div class="card cardTitle">Title one</div>
<div class="card cardDescription">Description one Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title two</div>
<div class="card cardDescription">Description two Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title three</div>
<div class="card cardDescription">Description three Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title four</div>
<div class="card cardDescription">Description four Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title five </div>
<div class="card cardDescription">Description five Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
On desktop view it is fine but on smaller views like mobile, I'd like to stack the title and description close together, so the gap between title and description close together but the gap of each row stays the same. Like so:
What's the best way to achieve this? Is grid the right way to approach this?
You can do like this:
Only use display: grid; on desktop, and then use a margin-bottom for controlling the space. 😊
.cards {
max-width: 640px;
margin: 0 auto;
grid-gap: 32px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.cardTitle {
color: red;
font-size: 32px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
.cardDescription {
font-size: 18px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
margin-bottom: 2rem;
}
#media (min-width: 768px) {
.cards {
display: grid;
}
.cardTitle {
text-align: right;
}
.cardDescription {
text-align: left;
}
}
<div class="cards">
<div class="card cardTitle">Title one</div>
<div class="card cardDescription">Description one Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title two</div>
<div class="card cardDescription">Description two Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title three</div>
<div class="card cardDescription">Description three Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title four</div>
<div class="card cardDescription">Description four Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title five </div>
<div class="card cardDescription">Description five Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
Related
I'm trying to create a grid with three columns where the first column should be as wide as possible, except if there is text in the two other columns that could fill the space.
This is my working code:
.grid-wrapper {
width: 500px;
padding: 10px;
border-style: solid;
display: grid;
grid-template-columns: 1fr max-content max-content;
gap: 10px;
}
.ellipsis-item {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 100px;
}
.item {
border-style: solid;
padding: 5px;
}
.header {
font-weight: bold;
}
<h2>Grid 1</h2>
<div class="grid-wrapper">
<div class="item header">Column 1</div>
<div class="item header">Column 2</div>
<div class="item header">Column 3</div>
<div class="item">1 Lorem ipsum</div>
<div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>
<h2>Grid 2</h2>
<div class="grid-wrapper">
<div class="item header">Column 1</div>
<div class="item header">Column 2</div>
<div class="item header">Column 3</div>
<div class="item">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>
In the case of "Grid 1", I would like the first column to only be as wide as it needs to be. I.e. I want to be able to see more text in column two and three.
In the case of "Grid 2", I would like the last two columns to have a maximum width of, lets say 100 px, or preferably, the width of the text of Column 2 and Column 3, respectively. Then I want the first column to fill the remaining space (basically as it looks now).
EDIT: Grid 1 and 2 are just examples of the same grid, I don't want two different stylings.
Is this getting close?
.grid-wrapper {
width: 500px;
padding: 10px;
border-style: solid;
display: grid;
gap: 10px;
}
.g1 {
grid-template-columns: auto auto auto;
}
.g2 {
grid-template-columns: auto 100px 100px;
}
.ellipsis-item {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.item {
border-style: solid;
padding: 5px;
}
.header {
font-weight: bold;
}
<h2>Grid 1</h2>
<div class="grid-wrapper g1">
<div class="item header">Column 1</div>
<div class="item header">Column 2</div>
<div class="item header">Column 3</div>
<div class="item">1 Lorem ipsum</div>
<div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>
<br>
<br>
<h2>Grid 2</h2>
<div class="grid-wrapper g2">
<div class="item header">Column 1</div>
<div class="item header">Column 2</div>
<div class="item header">Column 3</div>
<div class="item">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>
I removed max-width: 100px and used
grid-template-columns: auto minmax(100px, 1fr) minmax(100px, 1fr)
which is close enough to what I wanted.
The problem is that when I use display inline-block it doesn't move all the boxes at once on a mobile screen (It has 3 boxes called "single-facilities"). The thing is that they move one at a time. I'm using display inline-block on media screen.
HTML:
<div class="box-facilities">
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>World Class Library</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm
od tempor.</p>
</div><!--facilities-text-->
</div><!--single-facilities-->
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>Largest Play Ground</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm
od tempor.</p>
</div><!--facilities-text-->
</div><!--single-facilities-->
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>Tasty and Healthy Food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm
od tempor.</p>
</div><!--facilities-text-->
</div><!--single-facilities-->
</div><!--box-facilities-->
CSS:
.box-facilities{
display: flex;
height: 800px;
align-items: center;
justify-content: space-evenly;
}
.single-facilities{
display: inline-block;
}
.img-facilities{
background-color: gray;
width: 27rem;
height: 27rem;
border-radius: 1.5rem;
}
.text-facilities{
margin-top: 1rem;
max-width: 28rem;
}
#media screen and (max-width: 1370px){
.box-facilities{
display: inline-block;
}
}
You can just change the direction to column as
flex-direction: column;
.box-facilities {
display: flex;
height: 800px;
align-items: center;
justify-content: space-evenly;
}
.single-facilities {
display: inline-block;
}
.img-facilities {
background-color: gray;
width: 27rem;
height: 27rem;
border-radius: 1.5rem;
}
.text-facilities {
margin-top: 1rem;
max-width: 28rem;
}
#media screen and (max-width: 1370px) {
.box-facilities {
/* display: inline-block; */
flex-direction: column;
}
}
<div class="box-facilities">
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>World Class Library</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm od tempor.</p>
</div>
<!--facilities-text-->
</div>
<!--single-facilities-->
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>Largest Play Ground</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm od tempor.</p>
</div>
<!--facilities-text-->
</div>
<!--single-facilities-->
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>Tasty and Healthy Food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm od tempor.</p>
</div>
<!--facilities-text-->
</div>
<!--single-facilities-->
</div>
<!--box-facilities-->
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
I am doing a group project where we are trying to replicate this website and I have been assigned this section:
I have everything laid out with flexbox but for some reason can't get the text centered for the section on the right. This is what I have got so far:
I tried using justify-content: center and align-items: center but nothing happens to the text. How do I align everything in the center?
Here is all my code in a codepen: https://codepen.io/caseycling/pen/VwmExMY
Here is my HTML:
'<body>
<div class="container">
<div class="ten-img">
<h1>10</h1>
</div>
<div class="yrs-exp">
<h2>Years Of Experience</h2>
<p>
DreamSoft is a team of highly experienced app designers and developers
creating unique software for you.
</p>
<button>Get In Touch</button>
</div>
<div class="deats-cont">
<div class="deat" id="deat-1">
<h1>2K</h1>
<p>Apps developed</p>
</div>
<div class="deat" id="deat-2">
<h1>40</h1>
<p>Consultants</p>
</div>
<div class="deat" id="deat-3">
<h1>12</h1>
<p>Awards</p>
</div>
<div class="deat" id="deat-4">
<h1>160</h1>
<p>Employees</p>
</div>
</div>
</div>
<div class="clients">
<a
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-9-270x117.png"
alt="mittos"
/></a>
<a
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-10-270x117.png"
alt="mittos"
/></a>
<a
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-3-270x117.png"
alt="mittos"
/></a>
<a
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-11-270x117.png"
alt="mittos"
/></a>
</div>
And here is the CSS:
* {
margin: 0;
}
.container {
margin: 5rem 10rem 2rem;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.ten-img {
font-size: 140px;
}
.yrs-exp {
margin: 1rem;
font-size: large;
flex-basis: 20%;
text-align: start;
}
.yrs-exp p {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.deats-cont {
display: flex;
flex-wrap: wrap;
}
.deat {
flex-basis: 49%;
min-height: 100px;
}
#deat-1 {
border-right: solid 1px black;
}
#deat-2 {
border-bottom: solid 1px black;
}
#deat-3 {
border-top: solid 1px black;
}
#deat-4 {
border-left: solid 1px black;
}
.clients {
margin: 1rem 10rem;
display: flex;
justify-content: space-between;
}
.clients img {
border: solid 1px black;
}
enter code here
Aligned text center in the box. Modified CSS only to get text in center
#media(min-width: 768px) {
.container-1 {
display: flex;
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
/* flex-direction: column */
}
.container-2 {
display: flex;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
justify-content: space-between;
/* justify-content: space-around; */
/* justify-content: flex-center; */
}
}
.container-3 {
display: flex;
flex-wrap: wrap;
}
.container-1 div, .container-2 div, .container-3 div{
border: 1px #ccc solid;
padding: 10px;
text-align: center;
}
.box-1 {
flex: 2;
order: 1;
}
.box-2 {
flex: 1;
order: 3;
}
.box-3 {
flex: 1;
order 2;
}
.container-2-box {
/* width: 27%; */
flex-bassi: 27%
}
.container-3-box {
/* width: 27%; */
flex-basis: 15%
}
<div class='container-1'>
<div class='box-1'>
<h3> Box One </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
<div class='box-2'>
<h3> Box Two </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
<div class='box-3'>
<h3> Box Three </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
</div>
<div class='container-2'>
<div class='container-2-box'>
<h3> Box Four </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
<div class='container-2-box'>
<h3> Box Five </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
<div class='container-2-box'>
<h3> Box Six </h3>
<p> Lorem ipum dolor sit amet, consectuture adispisi elit. </p>
</div>
</div>
<div class='container-3'>
<div class='container-3-box'>
<h3> Box Seven </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
<div class='container-3-box'>
<h3> Box Eight </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
<div class='container-3-box'>
<h3> Box Nine </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div><div class='container-3-box'>
<h3> Box Ten </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div><div class='container-3-box'>
<h3> Box Eleven </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div><div class='container-3-box'>
<h3> Box Tweleve </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
</div>
I have to render a row using the css grid such that, the first column has to have a flexible length whereas all the rest of the columns have to have a fixed width. Something along the lines of the following
grid-template-columns: 1fr repeat(10, 100px)
The above does not work. How can this be done?
<div class="container">
<div>1fr</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr repeat(10, 100px);
grid-column-gap: 20px;
}
.container > div {
background-color: brown;
color: white;
text-align: center
}
Use grid-template-columns: max-content repeat(4, 100px);
.grid {
display: grid;
grid-template-columns: max-content repeat(4, 100px);
}
.item {
border: 1px solid red;
}
<div class="grid">
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
</div>
<div class="grid">
<div class="item">Lorem ipsum dolor sit, amet...more</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">Lorem ipsum dolor sit amet.</div>
</div>
You can use auto-fit. It will fit the column into currently available space.
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
I have a #comments element which contains .comment elements. I would like to have 5 vertical lines from left to right, each 1px in width, 100% height (till the end of the #comments element), with 20px between them and without images. I tried to do that myself, but my CSS-fu isn't that high. Any help would be much appreciated.
HTML:
<div id="comments">
<div class="comment level1">Lorem ipsum dolor sit amet</div>
<div class="comment level2">Lorem ipsum dolor sit amet</div>
<div class="comment level3">Lorem ipsum dolor sit amet</div>
</div>
CSS:
#comments {
width: 400px;
border: 1px solid black;
}
.comment {
margin: 10px 0;
}
.level1 {}
.level2 { margin-left: 20px; }
.level3 { margin-left: 40px; }
Demo.
Here's how I imagine it:
|[comment ]
| |[comment ]
| |[comment ]
| | |[comment]
Is there some reason you need to have all the divs as direct children of the outer parent div? If you nest the divs you can accomplish this very easily:
css:
div div {
border-left: 1px solid black;
padding-left:20px;
}
nested html
<div id="comments">
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
</div>
</div>
updated fiddle showing how it would look here nested down to 5 levels:
http://jsfiddle.net/webchemist/tuZB6/4/