Create CSS Grid Layout with Pure CSS

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?

  1. We need a container for the videos and apply aspect-ratio: 16/9; to it.
  2. Then we add display: grid; grid-template-columns: repeat(3, 1fr) to the container to place the videos ina grid-layout with 3 columns.
  3. To make sure that the video not mess up the grid, we apply a width: 100% aspect-ratio: 16/9; to the videos.
  4. to make the top left video twice the size, we use the video:first-of-type selector to select the first video. Then we apply grid-column: span 2; grid-row: span 2; to it.
  5. 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 a min-height: 100vh; to the body to make sure it spans the entire screen.
  6. 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



Leave a reply



Submit