css grid

-
.gchild1 {
    display: grid;
    // grid-template-areas: "grr grl";
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    // grid-template-rows: 1fr;
    // column-gap: 1%;
    .grr {
      background: $color2;
    }
    .grl {
      //   margin-right: 10px;
      background: $color2;
    }
  }
  .grr {
    // grid-area: grr;
    background: $color3;
    padding: 10px;
    margin-right: 5px;
  }
  .grl {
    // grid-area: grl;
    background: $color3;
    padding: 10px;
    margin-right: 5px;
  }
}



<div class="grow">
            <div class="grl">
                <div class="gchild1">
                    <div class="grl">
                        <h5>1._) What is Lorem Ipsum?</h5>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                            been the
                            industry's standard
                            dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                            it to
                            make a type specimen
                            book. It has survived not only five centuries</p>
                    </div>
                    <div class="grr">
                        <h5>2._) What is Lorem Ipsum?</h5>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                            been the
                            industry's standard
                            dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                            it to
                            make a type specimen
                            book. It has survived not only five centuries</p>
                    </div>
                </div>
            </div>
            <div class="grr">
                <ul class="card-box-list-grid">
                    <li>
                        <h6>Dummy Title </h6><span>Dummy test goes here....</span>
                    </li>
                    <li>
                        <h6>Dummy Title </h6><span>Dummy test goes here....</span>
                    </li>
                    <li>
                        <h6>Dummy Title </h6><span>Dummy test goes here....</span>
                    </li>
                    <li>
                        <h6>Dummy Title </h6><span>Dummy test goes here....</span>
                    </li>
                    <li>
                        <h6>Dummy Title </h6><span>Dummy test goes here....</span>
                    </li>
                    <li>
                        <h6>Dummy Title </h6><span>Dummy test goes here....</span>
                    </li>
                </ul>
            </div>
        </div>

Comments

Post a Comment

Popular posts from this blog

Module Bundel

-
package.,json {    "name" :  " moduletutorial " ,    "version" :  " 1.0.0 " ,    "description" :  " creating module " ,    "main" :  " dom.js " ,    "scripts" : {      "test" :  " echo  \" Error: no test specified \"  && exit 1 " ,      "start" :  " webpack "   },    "author" :  "" ,    "license" :  " ISC " ,    "dependencies" : {      "webpack" :  " ^4.39.3 " ,      "webpack-cli" :  " ^3.3.8 "   } } webpack.config.js var   path   =   require ( " path " ); module . exports   =  {     entry: ' ./app.js ' ,     output: {         path:  path . resolve (__dirname),         filename:  ' main.js '     },     mode:  ' development ' }
Read more

Power of async and Promise

-
///////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////// Async //////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////// // const promise = fetch('https://jsonplaceholder.typicode.com/todos') // promise // .then(res => res.json()) // .then(data => console.log(data)) // .catch(err => console.log(err)) const getBlogs = async ( name ) => { const fruits = { " one " : " One 1 " , " two " : " Two 2 " , " three " : " Three 3 " } await delay ( 2000 ); return Promise . resolve ( fruits [ name ]); } // for small const makeMe = async () => { try {
Read more