Create CSS grid layout with pure CSS
You can try like below. You were almost good, missing grid-auto-flow:dense;
to allow the item to fill all the spaces.
.grid-container {
padding: 20px;
display: grid;
grid-gap: 20px;
grid-auto-rows: 1fr;
grid-template-columns: repeat(2, 1fr);
grid-auto-flow:dense;
counter-reset: albumList;
}
.item {
aspect-ratio: 1;
background: #ccc;
display: flex;
}
/* Number */
.item:before {
counter-increment: albumList;
content: counter(albumList);
margin: auto;
font-size: 40px;
color: #000000;
}
@media screen and (min-width: 40em) and (max-width: 63.99875em) {
/* 640 ~ 1023 */
.grid-container {
grid-template-columns: repeat(3, 1fr);
}
.item:nth-child(6n + 1),
.item:nth-child(6n + 6){
grid-area: span 2/span 2;
}
.item:nth-child(6n + 5) {
grid-column: 1;
}
}
@media print, screen and (min-width: 64em) {
/* 1024+ */
.grid-container {
grid-template-columns: repeat(4, 1fr);
}
.item:nth-child(10n + 1),
.item:nth-child(10n + 10){
grid-area: span 2/span 2;
}
.item:nth-child(10n + 8) {
grid-column: 1;
}
.item:nth-child(10n + 9) {
grid-column: 2;
}
}
<div class="grid-container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
How do I create a CSS grid layout like this?
Sticking with your method of explicitly defining grid areas you can use the same technique as you use on the horizontal placing - in that case you have defined 12 columns - on the vertical placing.
It looks as though the grid is to have 5 rows, the first element extends down for 2 and the element below it (the 4th element) extends down for 3 and so on.
This snippet removes bits of CSS which aren't needed, and sets the whole grid to have an aspect ratio 4:3. Obviously this may change in your particular requirement.
.cards_grid {
width: 100vmin;
height: 75vmin;
display: grid;
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
grid-template-areas: "first first first first second second second second second third third third" "first first first first second second second second second third third third" "fourth fourth fourth fourth second second second second second third third third" "fourth fourth fourth fourth fifth fifth fifth fifth sixth sixth sixth sixth" "fourth fourth fourth fourth fifth fifth fifth fifth sixth sixth sixth sixth";
}
.cards_grid>div {
background: gray;
}
.cards_grid>div:nth-child(1) {
grid-area: first;
}
.cards_grid>div:nth-child(2) {
grid-area: second;
}
.cards_grid>div:nth-child(3) {
grid-area: third;
}
.cards_grid>div:nth-child(4) {
grid-area: fourth;
}
.cards_grid>div:nth-child(5) {
grid-area: fifth;
}
.cards_grid>div:nth-child(6) {
grid-area: sixth;
}
<div class="cards_grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
create a custom layout using css grid
Use three columns grid-template-columns:auto 1fr 1fr
:
This allows the menu to be a wide as it requires with the remaining width split equally between the other two elements.
body{
background-color:#ecf0f1;
font-family:sans-serif;
}
.grid-container{
padding:10px;
background-color:#2ecc71;
display:grid;
grid-template-columns:auto 1fr 1fr;
}
.grid-container > div{
background-color:#34495e;
border:1px solid #fff;
color:#fff;
padding:20px 30px;
text-align:center;
}
.header{
grid-column:1/-1;
}
.menu{
grid-row:2/4;
}
.footer{
grid-column:2/-1
}
.main{
grid-column:2 ;
}
.right{
grid-column:3;
}
<div class="grid-container">
<div class="header" > Header </div>
<div class="menu" > Menu </div>
<div class="main"> Main </div>
<div class="right"> Right </div>
<div class="footer"> footer </div>
</div>
How to auto grid layout using pure css, HTML and javascript?
I recommend that you use padding instead of margin.
In order to make it work with padding, you need to put another div that has a padding and use your original div just to set the height and width of your content.
Here's an example of your code adapted with my use of padding and some width and height to adjust the div.
.section { clear: both; padding: 0px; margin: 0px;}
.col { display: block; float: left;}
.span_1_of_3 { width: 32.2%; height: 200px;}
.padding-div { padding: 1% 0 1% 1.6%; /*padding to make text look right*/ background-color: red; /*height and width so the divs are separated*/ height: 90%; width: 95%;}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 990px) { .span_1_of_3 { width: 49.2%; }}
@media screen and (max-width: 760px) { .span_1_of_3 { width: 100%; }}
<div id="plat-listing-main"> <div class="section group"> <div class="col span_1_of_3"> <div class="padding-div"> This is column 1 </div> </div> <div class="col span_1_of_3"> <div class="padding-div"> This is column 2 </div> </div> <div class="col span_1_of_3"> <div class="padding-div"> This is column 3 </div> </div> </div></div>
Is there any solution with PURE CSS to solve these two camera layouts with 16/9 aspect ratio and always centered?
- We need a container for the videos and apply
aspect-ratio: 16/9;
to it. - Then we add
display: grid; grid-template-columns: repeat(3, 1fr)
to the container to place the videos ina grid-layout with 3 columns. - To make sure that the video not mess up the grid, we apply a
width: 100% aspect-ratio: 16/9;
to the videos. - to make the top left video twice the size, we use the
video:first-of-type
selector to select the first video. Then we applygrid-column: span 2; grid-row: span 2;
to it. - to center the video in the screen we use
flexbox
we can center along the main-axis (per default: horizontally):justify-content: center;
. To center along the side-axis we can use:align-items: center;
. Note that it requires amin-height: 100vh;
to the body to make sure it spans the entire screen. - To make sure that the container always fit the screen, we use
media queries
and either apply a fixed height or a fixed width depending on the screen aspect-ratio.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.video-container {
aspect-ratio: 16/9;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 2px;
}
@media only screen and (min-aspect-ratio: 16/9) {
.video-container {
height: 95vh;
}
}
@media only screen and (max-aspect-ratio: 16/9) {
.video-container {
width: 95vw;
}
}
video {
width: 100%;
aspect-ratio: 16/9;
}
video:first-of-type {
grid-row: span 2;
grid-column: span 2;
}
<div class="video-container">
<video controls>
<source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4">
</video>
<video controls>
<source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4">
</video>
<video controls>
<source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4">
</video>
<video controls>
<source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4">
</video>
<video controls>
<source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4">
</video>
<video controls>
<source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4">
</video>
</div>
Convert template to pure css grid
You can do this purely with css grid (assuming that you have an element with 100% height of the container as the parent) by using grid-template-column and grid-template-row as seen below
<style>
.wrapper {
height:100vh;
}
.outline{
outline: 1px red solid;
}
.grid {
display:grid
}
.grid-cols-2 {
grid-template-columns: 1fr 1fr;
}
.grid-rows-2 {
grid-template-rows: 1fr 1fr;
}
</style>
<div class="wrapper outline grid grid-cols-2">
<div class="grid grid-rows-2 outline">
<div class="outline">Here is some text</div>
<div class="outline">Heres is another text</div>
</div>
<div class="outline">
This is a third text
</div>
</div>
Creating a repeating CSS Grid layout
Don't define explicit area, only define the sizes and let the browser do the job for you
.grid-container {
display: grid;
grid-gap: 15px;
grid-auto-flow:dense;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 150px; /* height of one row */
}
.item {
background: #222;
}
.grid-container > .item:nth-child(6n+1),
.grid-container > .item:nth-child(6n+6){
grid-area: span 2/span 3; /* take 2 rows and 3 columns */
}
.grid-container > .item:nth-child(6n+2),
.grid-container > .item:nth-child(6n+3),
.grid-container > .item:nth-child(6n+4){
grid-column: span 2; /* take 2 columns */
}
.grid-container > .item:nth-child(6n+5){
grid-column: 1/span 2; /* take 2 columns and start at column 1*/
}
<div class="grid-container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Avoid creating empty cells in grid CSS/HTML
Alright so for anyone wondering in the future, you need to add grid-auto-flow: dense;
to the grid container. From:
.image-canvas {
height: 500px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(0, 80px));
grid-template-rows: repeat(auto-fill, minmax(80px, 0));
justify-content: space-evenly;
grid-gap: 5px;
}
to:
.image-canvas {
height: 500px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(0, 80px));
grid-template-rows: repeat(auto-fill, minmax(80px, 0));
justify-content: space-evenly;
grid-gap: 5px;
grid-auto-flow: dense;
}
Related Topics
Percentage Height in Nested Flex Box
CSS Not Working on Django Password Form Field
Custom Checkboxes Failing on Firefox
Tools Debugging CSS in Internet Explorer
Remove Borders of Input Jquery Mobile
Css3 Grid Layouts: New Row After Specific Element - Possible
Twitter Bootstrap: White Space on Left and Right Side in Smaller Screen Widths
Removing Black Borders on a Vimeo Iframe Embed Using CSS
iOS Safari Transition Transform Not Working
React Table with Static Header on Browser Scroll
Create CSS Grid Layout with Pure CSS
How to Make a Svg Clippath with a <Path> Responsive
Pass SASS List to Mixin with Multiple Arguments
Print Page Count with Total Number of Pages Using CSS
Why Is There a Pesky Little Space Between <Img> and Other Elements