How to make an a-frame part of an HTML grid and take up the width of the parent div?

I have started toying around with A-Frame, and I have used their Model Viewer example as a starting point. I have tried to make this model viewer part of the html site, where it would be a smaller part of the grid:

<body>
    <div class="container">
      <div class="text-part">
        Some text here
      </div>
      <div class="a-frame">
        <a-scene
          renderer="colorManagement: true;"
          info-message="htmlSrc: #messageText"
          model-viewer="gltfModel: #triceratops; title: Triceratops"
        >
          <a-assets>
            <!--
      Model source: https://sketchfab.com/3d-models/triceratops-d16aabe33dc24f8ab37e3df50c068265
      Model author: https://sketchfab.com/VapTor
      Model license: Sketcfab Standard
    -->
            <a-asset-item
              id="triceratops"
              src="https://cdn.aframe.io/examples/ar/models/triceratops/scene.gltf"
              response-type="arraybuffer"
              crossorigin="anonymous"
            ></a-asset-item>

            <a-asset-item
              id="reticle"
              src="https://cdn.aframe.io/examples/ar/models/reticle/reticle.gltf"
              response-type="arraybuffer"
              crossorigin="anonymous"
            ></a-asset-item>

            <img
              id="shadow"
              src="https://cdn.glitch.com/20600112-c04b-492c-8190-8a5ccc06f37d%2Fshadow.png?v=1606338852399"
            />
            <a-asset-item id="messageText" src="message.html"></a-asset-item>
          </a-assets>
        </a-scene>
      </div>
    </div>
  </body>

In css I have set the container to have this styling:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

But, that didn't work as expected as the model viewer was still taking the whole page and wasn't part of the container. How can I fix this and make model viewer to take up the space of the given width by the parent div element. Here is the code of the example I have edited.

Solution

If you want to embed a scene within some custom layout there is the embedded component:

<div class="a-frame">
  <a-scene embedded>
    <!-- scene -->
  </a-scene>
</div>

like in this fiddle(with a grid layout).