Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
    <div class="container">
      <div class="box content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, ex! Lorem
        ipsum dolor, sit amet consectetur adipisicing elit. Et sapiente ipsa,
        minus quisquam ea eligendi dolore modi libero. Fugiat rerum eius ea sint
        omnis provident modi sed libero voluptate esse quis, dolorem delectus
        obcaecati minima adipisci dolor non quibusdam est assumenda quod quasi
        recusandae at repellat. Exercitationem ipsum dolor, distinctio, odio
        placeat atque a quis eaque error labore architecto quisquam impedit
        rerum at. Ad, accusantium voluptatum fugit laboriosam quae blanditiis
        iste beatae molestiae maxime commodi voluptates cumque eius odit,
        officia repudiandae eaque minus praesentium mollitia, quaerat alias et?
        Similique autem inventore animi aliquam, dolor vero veniam quisquam
        ipsam vel? Magni? Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Veniam sequi similique fuga autem eum quis facere molestiae
        provident debitis, et, mollitia maiores expedita veritatis excepturi
        saepe eos. Ut unde qui alias fugit ipsa accusamus voluptas architecto.
        Deleniti tenetur temporibus numquam. Non ex, aspernatur voluptatem eaque
        cupiditate atque, a similique fugiat perferendis numquam maiores
        perspiciatis voluptatum! Laborum voluptas corrupti incidunt velit
        obcaecati facere aspernatur, soluta earum autem perferendis voluptate,
        numquam iste! Dolores, vitae harum perferendis dolore modi facilis,
        suscipit ex dolorum adipisci eum amet ipsum maiores doloribus ad
        voluptatibus a ab accusamus sed vel, esse error. Labore impedit atque
        sint quia quis odio mollitia error quaerat repellat ullam commodi
        corporis animi illum voluptates doloribus, recusandae enim! Aliquid eum
        consectetur aspernatur, recusandae ullam distinctio facere ad soluta
        excepturi voluptati bus non. Officia deserunt odio ipsum praesentium
        delectus tenetur distinctio vel eaque accusamus repudiandae! Modi
        aperiam iste nisi excepturi quos atque ullam iusto molestiae corrupti
        libero, sequi consectetur officia. Natus enim saepe numquam libero quosunde vitae, tenetur voluptat e fugit ex facere exercitationem,
        voluptatum maxime iste reprehenderit dignissimos magnam molestias error
        at quasi. Nihil consectetur quibusdam labore temporibus quia sunt
        exercitationem perspiciatis laudantium repudiandae accusantium nisi
        similique voluptatem amet voluptatibus, tenetur dolorem earum impedit.
        Error a, debitis sapiente at illum ad repellendus repudiandae eligendi.
        Eum quasi saepe mollitia, sint, odio minus quae sit laborum quaerat
        tenetur nihil nulla maiores veniam por ro. Dolorem earum cumque impedit
        laboriosam placeat aperiam voluptates necessitatibus molestiae ratione
        est non consequatur ipsum incidunt eum, quo officia a dignissimos at aut
        cum! A iure nesciunt, quam magnam vel necessitatibus fugiat eligendi
        neque accusantium quos doloremque explicabo repudiandae officia odit
        laboriosam aspernatur odio deserunt obcaecati ipsum labore unde
        adipisci. Commodi distinctio ea maxime deserunt velit voluptate officia
        ducimus in a! Quod in unde possimus porro mollitia officiis inventore
        sequi beatae, ea at tempora nulla nisi libero itaque reprehenderit,
        voluptate optio minus facere exercitationem voluptatum eius quos!
        Provident ratione, molestias maxime eveniet reiciendis suscipit quo quia
        labore nisi, saepe quis quam et nam adipisci numquam illum corrupti
        facere ipsam nostrum eius, accusamus qui omnis? Autem harum, assumenda
        fugit atque fuga cum recusandae maiores repellat maxime nesciunt
        provident aut possimus odit doloribus temporibus in unde error vitae
        culpa iusto
        
      </div>
      <!-- <div class="sidebar"> -->
      <div class="box sidebar__box">
        Далеко-далеко за словесными горами в стране гласных и согласных живут
        рыбные тексты. Буквенных она над пунктуация однажды семантика переулка
        необходимыми наш жизни!
      </div>
      <div class="box sidebar__box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, ex! Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Quia id ut facere
        repudiandae in laboriosam consequatur atque fugit magnam deserunt
        expedita eaque dolorem, itaque, quis ipsum, eos eum perferendis
        corporis! Dignissimos vero consequatur, dolor impedit obcaecati ex
        nostrum! Totam, ut?
      </div>
      <div class="box sidebar__box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, ex! Lorem
        ipsum, dolor sit amet consectetur adipisicing elit. Quasi consectetur
        similique dicta excepturi pariatur fugit ullam doloremque quidem
        sapiente accusantium!
      </div>
      <div class="box sidebar__box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, ex!
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum, id!
      </div>
      <div class="box sidebar__box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, ex!
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis suscipit
        reprehenderit cumque ratione, saepe deserunt in, repellendus sequi, vero
        id fugit odio qui totam doloribus cupiditate asperiores. Fuga, sed odio.
      </div>
      <div class="box sidebar__box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, ex!
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis suscipit
        reprehenderit cumque ratione, saepe deserunt in, repellendus sequi, vero
        id fugit odio qui totam doloribus cupiditate asperiores. Fuga, sed odio.
      </div>
      <div class="box sidebar__box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, ex!
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis suscipit
        reprehenderit cumque ratione, saepe deserunt in, repellendus sequi, vero
        id fugit odio qui totam doloribus cupiditate asperiores. Fuga, sed odio.
      </div>
      <!-- </div> -->
    </div>
              
            
!

CSS

              
                .container {
        display: grid;
        
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-auto-columns: 200px;
        grid-auto-rows: minmax(200px, min-content);
        grid-gap: 10px;
      }
      .content {
        grid-column: 1/4;
        grid-row: 1/4;
      }

      .box {
        background-color: rgb(253, 193, 193);
        padding: 20px;
      }
      .sidebar {
        background-color: rgb(255, 219, 172);
      }
      .sidebar__box {
      }
              
            
!

JS

              
                 $(document).ready(function ($) {
 let myResize = function(){
   let x = 1;
   let hh = $(".content").height();
   if (hh<=500){
     x=2;
   }else if (500<hh && hh<=800){
     x=3;
   }else if (800<hh && hh<=1200){
     x=4;
   }else if (hh>1200){
     x=5;
   }
   $(".content").css("grid-row", "1 / " + x)
 }
 $(window).resize(function () {
      myResize();
    });
    myResize()
 });
              
            
!
999px

Console