I would like to display the content of these two columns only inside the container and the columns take the full width of the page like this image down bellow.
Is this possible by using css grid?
Thank you for your help and your support.
<div class="columns">
<div class="columns--container">
<div class="column">
<!-- Content -->
</div>
<div class="column">
<!-- Content -->
</div>
</div>
</div>
Ok, I'm new to grids, but this should work:
.columns {
height: 400px;
background: whitesmoke;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
}
.columns-container {
grid-column-start: 2;
grid-column-end: 4;
display: inherit;
grid-template-columns: auto auto;
flex-direction: row;
}
.column {
background: green;
}
<div class="columns">
<div class="columns-container">
<div class="column">
<!-- Content -->
</div>
<div class="column">
<!-- Content -->
</div>
</div>
</div>
Related
I'm trying to make a 3 column grid where the 2nd column extends both Col-1 and Col-3 I've specifically made an image to show a better representation of what I'm trying to do.
I'm using bootstrap 5 and I've read their page on grid layout and offsets but I still yet to get my head around how to do this.
I keep getting stuck on how to extend the 2nd column through to the 3rd one.
I've done 0 CSS for this AT the current moment and there is nothing else in the code that interacts with the static content part of the page. So it is very easy to replicate.
My current code:
<!--Static Content-->
<div class="" id="static-content-container" style="background-color: yellow;">
<div class="row">
<div class="col-md-9">
<p>Column 1</p>
</div>
<div class="col-md">
<p>Column 2</p>
</div>
<div class="col-md-9">
<p>Column 3</p>
</div>
</div>
<!--/Static Content-->
If I missed something here for you to replicate the same as I have please let me know what you need and I'll happily provide that for you.
I think the only way to do this with flex would be to change your html structure and group columns one and three and use display: contents:
.row {
display: flex;
width: 100%;
}
.col-wrapper {
width: 50%;
display: flex;
flex-direction: column;
}
.col-2 {
flex-grow: 1;
background: green;
}
#media screen and (max-width:768px) {
.row {
flex-direction: column;
}
.col-wrapper {
display: contents;
width: 100%;
}
.col-1 {
order: 1;
}
.col-2 {
order: 2;
}
.col-3 {
order: 3;
}
}
<div class="row">
<div class="col-wrapper">
<div class="col col-1">col 1</div>
<div class="col col-3">col 3</div>
</div>
<div class="col-wrapper">
<div class="col col-2">col 2</div>
</div>
</div>
If you can't change the html structure, you're probably better off using css grid:
#media screen and (min-width: 768px) {
.wrapper {
display:grid;
grid-template-columns: repeat(2, 50%);
grid-gap:10px;
}
.col-2 {
background: green;
grid-row: 1 / 3;
grid-column: 2;
}
}
<div class="wrapper">
<div class="col-1">
col1
</div>
<div class="col-2">
col2
</div>
<div class="col-3">
col3
</div>
</div>
Does anyone know how to set multiple divs side-by-side that are centered and have at least 10 pixels gap between each other? I managed to do it but the following divs went right under the first 2.
Here is an example of what outcome I am expecting: https://imgur.com/a/p1ilgCu
And here is the outcome I made: https://imgur.com/a/JI0beTk
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 50px;
height: 50%;
width: 33.33%;
text-align: center;
transform: translate(50px, 20px);
}
.column1 {
background-color: whitesmoke;
margin-top: 10px;
border-radius: 20px;
}
<div class="container">
<div class="column1">
<img src="profilepiclink256x" style="width:50%">
<h1>text name</h1>
</div>
<div class="column1">
<img src="profilepiclink256x" style="width:50%">
<h1>text name</h1>
</div>
<div class="column1">
</div>
<div class="column1">
</div>
</div>
You can use flex to place them side by side. If you want them to fill the width of your parent element, use min-width on the children calculate 100% by the amount of divs and subtract the column gap. min-width: calc(100% / var(--num-cols) - var(--col-gap)); i used css variables.
:root {
--num-cols: 4;
--col-gap: 10px;
}
.container {
display: flex;
/* centers content when flex axis is set as row */
justify-content: center;
}
.column1 {
background-color: whitesmoke;
margin-top: 10px;
border-radius: 20px;
/* will fill parents width with children including gap
/* can also use flex-grow: 1; to fill parents width with children */
/* min-width: calc(100% / var(--num-cols) - var(--col-gap)); */
flex-grow: 1; /* remove if you do not want to spread entire width of parent width */
}
.column1~.column1 {
/* adds a gap of 10px to all but first col element */
margin-left: var(--col-gap);
}
<div class="container">
<div class="column1">
<img src="profilepiclink256x" style="width:50%">
<h1>text name</h1>
</div>
<div class="column1">
<img src="profilepiclink256x" style="width:50%">
<h1>text name</h1>
</div>
<div class="column1">
<img src="profilepiclink256x" style="width:50%">
<h1>text name</h1>
</div>
<div class="column1">
<img src="profilepiclink256x" style="width:50%">
<h1>text name</h1>
</div>
</div>
Use flex element in your css:
.container {
display: flex;
}
This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 2 years ago.
How can I make all footers (with green background) same height, keeping content height also the same, too?
Current output:
Desired output:
CodePen: https://codepen.io/yasincad/pen/poNPgYv
Current HTML:
<div class="cards">
<div class="card">
<div>Long...<br><br><br>content</div>
<div class="card-footer">
<h3>Footer title</h3>
<div>Long...<br><br>footer text</div>
</div>
</div>
<div class="card">
<div>Shorter content</div>
<div class="card-footer">
<h3>Footer title</h3>
<div>Short footer text</div>
</div>
</div>
</div>
Current CSS:
.cards {
width: 600px;
column-gap: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.card {
background-color: lightgrey;
display: grid;
grid-template-rows: 1fr auto auto;
}
.card-footer {
background: lightgreen;
}
.cards {
width: 83vw;
column-gap: 3vw;
display: flex;
}
.card {
background-color: lightgrey;
width:40vw;
}
.card-footer {
background: lightgreen;
width:40vw;
}
<div class="cards">
<div class="card">
<div>Long...<br><br><br>content</div>
</div>
<div class="card">
<div>Shorter content</div>
</div>
</div>
<div class='cards'>
<div class="card-footer">
<h3>Footer title</h3>
<div>Long...<br><br>footer text</div>
</div>
<div class="card-footer">
<h3>Footer title</h3>
<div>Short footer text</div>
</div>
</div>
I'm programming a web application with collapsible sidebar inside a CSS grid. The CSS grid divides the whole UI into sections, and the sidebar panel is a sub-component of one of those sections.
The issue I am running into is that I want the side panel to automatically shrink to the minimum size of it's contents, which it does fine until it's added to a CSS grid cell, at which point it expands to fill the entire cell.
Here is a quick example of the issue:
<style>
#myGrid{
display: grid;
grid-template-areas:
"g1 g2";
}
#panel{
grid-area: g2;
display: inline-block;
background: #FFAAAA;
height: 100%;
width: auto;
min-width: minmax(0, 1fr);
}
#panelContents{
display: flex;
flex-direction: row;
height: 100%;
}
#collapseArrow{
align-self: center;
right: 0;
top: 50%;
}
#block{
grid-area: g1;
width: 200px;
height: 100%;
background: #AAAAFF;
}
</style>
<body>
<div id="myGrid">
<div id="block">
Contents
</div>
<div id="panel">
<div id="panelContents">
<div id="collapseContents">
<div class="item">
Item1
</div>
<div class="item">
Item2
</div>
<div class="item">
Item3
</div>
<div class="item">
Item4
</div>
<div class="item">
Item5
</div>
</div>
<div id="collapseArrow"><</div>
</div>
</div>
</div>
</body>
Any idea how to solve this? I am trying to get the red panel to shrink to fit it's contents. I tried changing the min-width to 0, but that didn't seem to help.
EDIT: This is a more complex UI for an HTML5 game engine. The left grid cell is an asset browser, and the red panel is a simple properties panel for the right editor window (right grid cell), which I'm trying to display only on the left portion of the cell, so the rest of the right cell can be the editor window.
Use the other column to squeeze the panel down to its content width.
#myGrid {
display: grid;
grid-template-columns: 1fr auto; /* 1fr consumes all free space on the row */
grid-template-areas: "g1 g2";
}
#block {
grid-area: g1;
background: #AAAAFF;
}
#panel {
grid-area: g2;
background: #FFAAAA;
}
#panelContents {
display: flex;
}
#collapseArrow {
align-self: center;
}
<div id="myGrid">
<div id="block">
Contents
</div>
<div id="panel">
<div id="panelContents">
<div id="collapseContents">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
</div>
<div id="collapseArrow"><</div>
</div>
</div>
</div>
I'm trying to make a grid with items/pizza toppings to order, and I would like an "Add to cart" button under each item in the grid. How would I go about doing that?
So far I've tried simply putting a button with a line break under an element but as assumed, that didn't work.
Here is the relevant code I have in the body:
.wrapper {
width: 90%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 200px;
grid-row-gap: 30px;
grid-column-gap: 10px;
}
.item {
background: firebrick;
color: white;
padding: 10px;
}
.item:nth-child(even) {
background: rgb(139, 19, 19);
}
.add {
margin-bottom: 100px;
}
button {
margin-bottom: 100px;
}
#container {
background-color: maroon;
width: 1500px;
height: 1200px;
margin-left: auto;
margin-right: auto;
border-color: black;
border-width: 10px;
border-style: double;
}
<div id="container">
<div id="header">
<h1> Pizza Planet </h1>
<script src="index.js"></script>
</div>
<div id="content">
<h2>Select your items:</h2>
<div class="wrapper">
<div class="item">1</div>
<div class="add"><button>Add To Cart</button></div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
</div>
All that does is make a huge gap for another cell on the grid with a tiny add to cart button on there. Any help would be appreciated, thank you.
One approach might be to use CSS grid to achieve what you require. A simple grid layout for what you describe above could be done like this:
.item img {
width:100%;
/* Causes the button to sit below the img */
display:block;
}
.item button {
width:100%;
}
.grid {
/* Specifies css grid to be used */
display:grid;
/* Specifies the number of columns and sizes in the grid */
grid-template-columns: 1fr 1fr;
/* Specifies spacing between grid cells */
grid-gap:1rem;
}
<div class="grid">
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
</div>