We Keep Coding

Unable to set grid width property

On my personal page i have a section with Skills, showing how much i know each programing language (i do not think it is accurate but whatever). I can seem to set width on the Skill grid to behave as all the other grids.
This is how it looks:
This is what i need it to look like (except with the skills instead of email):
Here you can access the code:
https://codepen.io/wodosharlatan/pen/OJwQNLL
I solved the contact section by using grid-column: span 2;, but it does not work for this section, i also tried setting the grid width to 100% but it did not do anything
Any help or ideas are appreciated, if you need more code drop me a comment

You are setting grid with two columns instead of one for "medium devices".
.about__container,
.skills__container,
.portfolio__content,
.contact__container,
.footer__container {
grid-template-columns: repeat(2, 1fr);
}
replace it in your media query for medium sized devices with:
.about__container,
.skills__container,
.portfolio__content,
.contact__container,
.footer__container {
grid-template-columns: 1fr;
}
Keep in mind these are combined selectors, so it will change styles for others containers also, but I hope you want to achieve full width for medium sized devices anyway.
P.S.
grid-template-columns: repeat(2, 1fr);
just creates two equal columns and repeat function translates to:
grid-template-columns: 1fr 1fr;
Also don't forget to cleanup spanning column code :-)

It seems the skills__container has an extra wrapping layer inside for the content, and might not actually apply the layout to its content.
Forked demo with modification: codepen
Try remove the extra wrapping layer:
<div class="skills__container container grid">
<!-- Removed extra wrapper 👉 <div> -->
<!--==================== SKILLS 1 ====================-->
<div class="skills__content skills__open">
<div class="skills__header">
<i class="uil uil-brackets-curly skills__icon"></i>
<div>
<h1 class="skills__title">Frontend development</h1>
<span class="skills__subtitle">More than a year</span>
</div>
<i class="uil uil-angle-down skills__arrow"></i>
</div>
<div class="skills__list grid">
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">CSS</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__css"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">HTML</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__html"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">JavaScript</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__js"></span>
</div>
</div>
</div>
</div>
<!--==================== SKILLS 2 ====================-->
<div class="skills__content skills__close">
<div class="skills__header">
<i class="uil uil-database skills__icon"></i>
<div>
<h1 class="skills__title">Backend development</h1>
<span class="skills__subtitle">Around 3 months</span>
</div>
<i class="uil uil-angle-down skills__arrow"></i>
</div>
<div class="skills__list grid">
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">PHP</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__php"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">NODE JS</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__node"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">SQL</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__sql"></span>
</div>
</div>
</div>
</div>
<!--==================== SKILLS 3 ====================-->
<div class="skills__content skills__close">
<div class="skills__header">
<i class="uil uil-code-branch skills__icon"></i>
<div>
<h1 class="skills__title">Miscellaneous Skills</h1>
<span class="skills__subtitle">Time varies by skill</span>
</div>
<i class="uil uil-angle-down skills__arrow"></i>
</div>
<div class="skills__list grid">
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">GIT</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__git"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">Bash</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__bash"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">C#</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__c-sharp"></span>
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>

How to put some div elements inside a main div element with javascript?

Here's an example:
<div class="main"> </div>
<div class="main2"> </div>
<div class="sub"> content </div>
<div class="sub"> content </div>
<div class="sub"> content </div>
<div class="sub"> content </div>
<div class="sub"> content </div>
<div class="sub"> content </div>
<div class="sub"> content </div>
<div class="sub"> content </div>
<div class="sub"> content </div>
I want all the div's that obey the '2n-1' equation to be inside main div, and all the div's that obey the 2n equation to be inside the main2 div.
I tried with css nth-child but I couldn't :/

If i understand you correctly :
const subs = document.querySelectorAll('.sub')
const main = document.querySelector('.main')
const main2 = document.querySelector('.main2')
for (let i = 0; i < subs.length; i++) {
if(i%2 === 0) {
main.appendChild(subs[i])
} else {
main2.appendChild(subs[i])
}
}
.main{
background: blue;
}
.main2{
background: red;
}
<div class="main"> </div>
<div class="main2"> </div>
<div class="sub"> content1 </div>
<div class="sub"> content2 </div>
<div class="sub"> content3 </div>
<div class="sub"> content4 </div>
<div class="sub"> content5 </div>
<div class="sub"> content6 </div>
<div class="sub"> content7 </div>
<div class="sub"> content8 </div>
<div class="sub"> content9 </div>

Not in Order when using Masonry Layout using css grid

I'm trying to create layout of 2 columns using masonry layout in grid system. Each Item may have multiple links and descriptions. So that I tried using masonry layout avoid gap in rows.
But the item are not in order (Left to Right). In the below pic first item as multiple links to its occupied two rows. So that 3rd item wrap to 2nd column.
How can i avoid that 3rd item shouldn't wrap to 2nd column. It's should be in left to right or Odd items on left and even on right.
How can anyone help me with this please.
let productList={
resizeAllGridItems: function(){
allItems = document.getElementsByClassName("item");
for(x=0;x<allItems.length;x++){
resizeGridItem(allItems[x]);
}
}
}
$(document).ready(function () {
productList.resizeAllGridItems();
$( window ).resize(function() {
productList.resizeAllGridItems
});
});
function resizeGridItem(item){
grid = document.getElementsByClassName("grid")[0];
rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
console.log(rowHeight,rowGap,(item.querySelector('.content').getBoundingClientRect().height+rowGap))
rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
item.style.gridRowEnd = "span "+rowSpan;
}
function resizeInstance(instance){
item = instance.elements[0];
resizeGridItem(item);
}
.container{
max-width:640px;
}
.grid {
display: grid;
grid-gap: 50px 40px;
grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
grid-auto-rows: 40px;
}
body {
margin: 10px;
color: #374046;
background-color: #fff;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1.15em;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.item {
background-color: #ffffff;
border: 2px solid black;
}
.product-link{
font-size: larger;
}
.desc{
padding-right:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="grid">
<div class="item">
<div class="content">
<div class="title">
<p>Index-Lined Annuity -1</p>
</div>
<div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="title">
<p>Single Premium Income Annuity -2 </p>
</div>
<div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="title">
<p>Variable Annuity -3</p>
</div>
<div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="title">
<p>Fixed Rate Annuity -4</p>
</div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="title">
<p>Deffered Annuity -5</p>
</div>
<div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
enter image description here

Scrollbar doesn't appear when adding <li> dynamically by jquery

I have ul list in div and if I set div height and overflow-y
It becomes scrollable.
<div class="inner" style="height:150px;overflow-y:scroll;font-size:18px;">
<ul id="mainul">
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet frist<br>
tweet<br>
tweet<br>
test<p>
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet that's second<br>
tweet<br>
tweet<br>
test<br>
</div>
</div>
</li>
</ul>
</div>
However when I add items by append of jquery.
$("#mainul").append(`
<li>
<div class="card">
<div class="card-body">
<p>Add this few times<br>
tweet<br>
tweet<br>
test<br>
</div>
</div>
</li>`);
There never appears scroll bar.
Is this the way to make scrollbar for dynamically added <li> ?
How should I solve this??

There were a few syntax errors in your code.
You were also missing the closing quote in $("#mainul") though Michelangelo edited it.
This works below.
$("#mainul").append(`
<li>
<div class="card">
<div class="card-body">
<p>
Add this few times<br>
tweet<br>
tweet<br>
test<br>
</p>
</div>
</div>
</li>`);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inner" style="height:150px;overflow-y:scroll;font-size:18px;">
<ul id="mainul">
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet frist<br>
tweet<br>
tweet<br>
test<p>
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet that's second<br>
tweet<br>
tweet<br>
test<br>
</p>
</div>
</div>
</li>
</ul>
</div>

Applying styles based on jquery conditions

I have a following html as follows:
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have to apply "border-width:10px" for all divs with class = innerdiv provided that "outerdiv" contains both "title" and "innerdiv"
.
My expected output is:
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying this:
$(element).find(".outerdiv").not("[class="title"]).css("border-width","10px").
Edit: The number of divs are dynamic and not fixed in number

You need to use :has selector along with immediate child selector to target innerdiv element:
$('.outerdiv:has(.innerdiv):has(.title) > ,.title > .innerdiv ').css("border-width","10px");
DEMO SNIPPET :
$(function(){
$('.outerdiv:has(.innerdiv):has(.title) > .title > .innerdiv ').css("border-width","100px").css('border' ,'1px solid grey')
}) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="outerdiv">
<div class="title">1
<div class="innerdiv">2
<div class="outerdiv">3
<div class="title">4
<div class="innerdiv">5
<div class="outerdiv">6
<div class="innerdiv">7
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You can do this with good css hierarchy just apply the styles to
.outerdiv > .title > .innerdiv{
css goes here
}
and they will only affect divs in the hierarchy that you mentioned.

Simply use:
$('.innerdiv').css('border-width','10px');
It will add border-width to all divs with class 'innerdiv'.