grid 10

grid-10.markdown

all about grid

A Pen by arifurr rahman on CodePen.

License.

index.html

<!-- general grid  -->
<section>
  <header class="primary-header flex">
     <div class="">
    grid by -arifur
  </div>
  <button class="mobile-nav-toggle" data-menuBtn><span class="sr-only">menu</span></button>
  <nav>
    <ul class="primary-navigation" data-visible="false">
      <li><a href="#gridBasic">grid basic</a></li>
      <li><a href="#gridNested">nested grid</a></li>
      <li><a href="#j-items">justify-items</a></li>
      <li><a href="#j-self">justify-self</a></li>
      <li><a href="#a-items">align-items</a></li>
      <li><a href="#a-self">align-self</a></li>
      <li><a href="#minmax">minmax</a></li>
      <li><a href="#auto-fit">auto-fit</a></li>
      <li><a href="#auto-fill">auto-fill</a></li>
      <li><a href="#more">more about grid</a></li>
    </ul>
  </nav>
  </header>
  
</section>
  <section>
<div class="container" id="gridBasic">
  <h1><span class="point point--header">01</span>basic grid template</h1>
  <div>
     <p>how u write gride code:</p>
  <p> <span class="point">01 </span> display:grid;<span class="comment"> /**it will     not change anything untill u define column**/</span>   </p> 
  <p><span class="point">02</span> grid-template- columns:repeate(3,1fr);<span class="comment">3 column hobe 1fr kore</span></P>
    <P><span class="point">03</span>grid-auto-rows:minmax(70px,auto)<span class="comment">for flaxible height write </span></p>
  </div>
 
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
 </div>

<!-- nested grid section -->
<div class="container" id="gridNested">
  <h1><span class="point point--header">02</span>basic nested grid template</h1>
  <div>
    <p>*** nested grid er mane holo akta grid er betore ar e</p>
     <p>how u write gride code:</p>
  <p> <span class="point">01 </span> display:grid;<span class="comment"> /**it will     not change anything untill u define column**/</span>   </p> 
  <p><span class="point">02</span> grid-template- columns:repeate(3,1fr);<span class="comment">3 column hobe 1fr kore</span></P>
    <P><span class="point">03</span>grid-auto-rows:minmax(70px,auto)<span class="comment">for flaxible height write </span></p>
  </div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="wrapper nested-grid">
      <div>a</div>
      <div>b</div>
      <div>c</div>
      <div>d</div>
  </div>
</div>
 </div>
    
  <!-- justify items grid section -->
<div class="container" id="j-items">
  <h1><span class="point point--header">03</span>justify-items</h1>
  <div>
     <p>how u write gride code:</p>
  <p> <span class="point">01 </span> display:grid;<span class="comment"> /**it will     not change anything untill u define column**/</span>   </p> 
  <p><span class="point">02</span> grid-template- columns:repeate(3,1fr);<span class="comment">3 column hobe 1fr kore</span></P>
    <P><span class="point">03</span>grid-auto-rows:minmax(70px,auto)<span class="comment">for flaxible height write </span></p>
  <P><span class="point">04</span>justify-items:start/center/end/space-around/space-around<span class="comment">justify-items for all content of the grid and its will work on x axis</span></p>
  </div>
<div class="wrapper justify-items-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
 </div>
    
       <!-- justify items grid section -->
<div class="container" id="j-self">
  <h1><span class="point point--header">04</span>justify-self</h1>
  <div>
     <p>how u write gride code:</p>
  <p> <span class="point">01 </span> display:grid;<span class="comment"> /**it will     not change anything untill u define column**/</span>   </p> 
  <p><span class="point">02</span> grid-template- columns:repeate(3,1fr);<span class="comment">3 column hobe 1fr kore</span></P>
    <P><span class="point">03</span>grid-auto-rows:minmax(70px,auto)<span class="comment">for flaxible height write </span></p>
  <P><span class="point">04</span>justify-self:start/center/end/space-around/space-around<span class="comment">justify-self for individual items of the grid and its will work on x axis</span></p>
  </div>
<div class="wrapper">
  <div class="justify-self-end border">1</div>
  <div class="justify-self-start">2</div>
  <div class="justify-self-center">3</div>
</div>
 </div>
    
      <!-- align items grid section x axis -->
<div class="container" id="a-items">
  <h1><span class="point point--header">05</span>align-items</h1>
  <div>
     <p>how u write gride code:</p>
  <p> <span class="point">01 </span> display:grid;<span class="comment"> /**it will     not change anything untill u define column**/</span>   </p> 
  <p><span class="point">02</span> grid-template- columns:repeate(3,1fr);<span class="comment">3 column hobe 1fr kore</span></P>
    <P><span class="point">03</span>grid-auto-rows:minmax(70px,auto)<span class="comment">for flaxible height write </span></p>
  <P><span class="point">04</span>align-items:start/center/end/space-around/space-around<span class="comment">align-items all items items of the grid and its will work on Y axis</span></p>
  </div>
<div class="wrapper align-items-end">
  <div class="justify-self-end">1</div>
  <div>2</div>
  <div>3</div>
</div>
 </div>
    
    <!-- align self grid section x axis -->
<div class="container" id="a-self">
  <h1><span class="point point--header">06</span>align-self</h1>
  <div>
     <p>how u write gride code:</p>
  <p> <span class="point">01 </span> display:grid;<span class="comment"> /**it will     not change anything untill u define column**/</span>   </p> 
  <p><span class="point">02</span> grid-template- columns:repeate(3,1fr);<span class="comment">3 column hobe 1fr kore</span></P>
    <P><span class="point">03</span>grid-auto-rows:minmax(70px,auto)<span class="comment">for flaxible height write </span></p>
  <P><span class="point">04</span>align-self:start/center/end/space-around/space-around<span class="comment">justify-self for individual items of the grid and its will work on Y axis</span></p>
  </div>
<div class="wrapper">
  <div class="align-self-center">12</div>
  <div>2</div>
  <div>3</div>
</div>
 </div>
    <!-- minmax() funtion in grid section x axis -->
<div class="container" id="minmax">
  <h1><span class="point point--header">07</span>minmax() function</h1>
  <div>
    
     <p>how u write gride code:</p>
  <p> <span class="point">01 </span> display:grid;<span class="comment"> /**it will     not change anything untill u define column**/</span>   </p> 
  <p><span class="point">02</span> grid-template- columns:repeate(3,1fr);<span class="comment">3 column hobe 1fr kore</span></P>
    <P><span class="point">03</span>grid-auto-rows:minmax(70px,auto)<span class="comment">for flaxible height write </span></p>
  <P><span class="point">04</span>grid-template-columns:repeate(auto-fit,minmax(100px,1fr))<span class="comment">it will help you for responsive layout for flaxible height write grid-auto-rows:minmax(70px,auto)</span></p>
  </div>
<div class="wrapper wrapper--minmax">
  <div class="align-self-center">12</div>
  <div>2</div>
  <div>3</div>
</div>
  <p>***this minmax syntax ,where we’re going to say I want each of those columns  to be a minimum of 100px and a maximum of 1fr ***</p>
 </div>
    
    
    <!-- auto fit  in grid section x axis -->
<div class="container" id="auto-fit">
  <h1><span class="point point--header">08</span>grid template column:repeat(auto-fit,1fr);</h1>
  <p>where you shoud write <span>display:grid;</span> it will not change anything untill u define column ;than <span>grid template column:repeat(auto-fit,1fr); it will help you for responsive layout</span> 
  for flaxible height write <span>grid-auto-rows:minmax(70px,auto)</span> </p>
<div class="wrapper auto-fit">
  <div >1</div>
  <div>2</div>
  <div>3</div>
</div>
  <p>*** ***</p>
 </div>
    
    <!-- auto fit  in grid section x axis -->
<div class="container" id="auto-fill">
  <h1><span class="point point--header">09</span>grid template column:repeat(auto-fill,1fr);</h1>
  <p>where you shoud write <span>display:grid;</span> it will not change anything untill u define column ;than <span>grid template column:repeat(auto-fit,1fr); it will help you for responsive layout</span> 
  for flaxible height write <span>grid-auto-rows:minmax(70px,auto)</span> </p>
<div class="wrapper auto-fill">
  <div >1</div>
  <div>2</div>
  <div>3</div>
</div>
  <p>*** ***</p>
 </div>

<!-- minmax(40ch,65ch) funtion in grid section x axis -->
<div class="container" id="more">
  <h1><span class="point point--header">10</span>grid template column:100px 1fr 1fr minmax(40ch,65ch) 1fr;</h1>
  <p>where you shoud write <span>display:grid;</span> it will not change anything untill u define column ;than <span>grid template column:100px 1fr 1fr minmax(40ch,65ch) 1fr; it will help you for responsive layout</span> 
  for flaxible height write <span>grid-auto-rows:minmax(70px,auto)</span> </p>
<div class="wrapper wrapper--gridTemClm">
  <div class="align-self-center">1</div>
  <div>2</div>
  <div>3</div>
  <div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nemo porro quia nulla debitis obcaecati perspiciatis amet ut et optio voluptas nobis dolore magni unde, distinctio tempora. Provident accusamus unde ratione magni ut. Corrupti sed, conipit, inventore animi perspiciatis quas soluta qui ab sunt commodi autem odio quos nostrum deserunt? Repellat assumenda possimus quibusdam in architecto sequi iure natus ratione eum, obcaecati sed adipisci nam nisi, omnis libero repreher, adipisci eaque nesciunt tempora, nisi delectus doloribus quasi, minima aliquam.</p></div>
  <div>5</div>
</div>
  <p>***Im just sizing in particular column using minmax.then first column is 100px ,then 1fr,1fr, minmax 40 charecters to 65 charecters and 1fr . ***</p>
 </div>
   </section>

script.js

const menuBtn=document.querySelector('.mobile-nav-toggle');
const nav=document.querySelector('.primary-navigation');
menuBtn.addEventListener("click",()=>{
  const visibility=document.querySelector('.primary-navigation').getAttribute('data-visible');
  console.log(visibility);
  if(visibility==="false"){
    nav.setAttribute("data-visible",true);
  }else if(visibility==="true"){
    nav.setAttribute('data-visible',false);
  }
});

style.css

/* general css  */
*,*::before;*::after{
  box-sizing:border-box;
}
body{
  margin:0;
  padding:0;
  
}
.flex{
  display:flex;
  gap:var(--gap,1em);
}
.container{
  padding:2em .5em;
  margin-inline : auto;
  max-width     : 60em;
}
.container:nth-child(even){
  background:hsl(270,100%,85%);
}
.container:nth-child(odd){
  background:hsl(270,100%,95%);
}
h1{
  padding:1em 1.2em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background:hsl(270,100%,50%);
  color:hsl(270,80%,99%);
  text-transform:uppercase;
  font-size:1.5em;
}
p{
  font-size:1.2em;
  line-height:1.3;
}
.point{
  background:hsl(120,80%,70%);
  border-radius:50%;
  text-align:center;
  margin-inline:1em 0.5em;
}
.point--header{
  background:hsl(120,80%,0%);
}
.comment{
  background:hsl(120,10%,70%);
  margin-left:.5em;
}
.wrapper>div{
  background:hsl(0,100%,50%);
}
.border:1px solid hsl(0,100%,80%);
section>*+*{
  margin-top:3.5rem;
}
/* style for nav */
.sr-only{
  position   : absolute;
    width      : 1px;
    height     : 1px;
    padding    : 0;
    margin     : -1px;
    overflow   : hidden;
    clip       : rect(0, 0, 0, 0);
    white-space: nowrap;
    /* added line */
    border     : 0;
}
li{
  list-style:none;
}
a{
  text-decoration:none;
}
.primary-header{
  justify-content:space-between;
  align-items:center;
  border:1px solid red;
}
.logo{
  margin:2em;
}
.mobile-nav-toggle{
  display:none;
  cursor:pointer;
}
.primary-navigation{
  display:flex;
  gap:1em;
}
@media(max-width:35em){
  .primary-navigation{
    position:fixed;
    flex-direction:column;
    inset:0 0 0 35%;
    background:hsl(330,80%,40%);
    transform:translateX(100%);
    transition:transform 300ms ease-in-out;
  }
  .primary-navigation[data-visible="true"]{
    transform:translateX(0%);
  }
  .mobile-nav-toggle{
    display:block;
    position:absolute;
    top:2em;
    right:1em;
    background:hsl(100,100%,50%);
    z-index:2000;
    width:2em;height:.2em;
    border:none;
    
  }
}
/* basic grid  */
.wrapper{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(70px,auto);
  gap:1em;
  background:hsl(330,80%,90%);
}

.nested-grid{
  grid-template-columns:repeat(4,1fr);
}
.nested-grid>div{
  border:1px solid green;
}
/* justify-items  set in all item together*/
.justify-items-end{
  justify-items:end;
}
.justify-items-start{
  justify-items:start;
}
.justify-items-center{
  justify-items:center;
}
/* justify-self  set in individual item*/
.justify-self-end{
  justify-self:end;
}
.justify-self-start{
  justify-self:start;
}
.justify-self-center{
  justify-self:center;
}
/* align-items  set in all item together*/
.align-items-end{
  align-items:end;
}
.align-items-start{
  align-items:start;
}
.align-items-center{
  align-items:center;
}
/* align-self  set set for individual item in x axix*/
.align-self-end{
  align-self:end;
}
.align-self-start{
  align-self:start;
}
.align-self-center{
  align-self:center;
}
/* minmax for responsive layout */
.wrapper--minmax{
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
/* grid template column  */
.wrapper--gridTemClm{
  grid-template-columns:100px 1fr 1fr minmax(40ch,65ch),1fr;
}
/* auto-fit */
.auto-fit{
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
/* auto-fit */
.auto-fill{
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}

https://codepen.io/arifurrex/pen/dyzBORV?editors=1100