Есть несколько способов случайного расположения картинок в блоках. Один из простых способов - использовать язык программирования, такой как JavaScript, для генерации случайных чисел и применения случайного порядка к элементам.
Вот пример кода на JavaScript, который случайно располагает 4 картинки в 9 блоках:
HTML:
```html
<div class="grid">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
</div>
```
CSS:
```css
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
img {
width: 100%;
height: auto;
}
.empty {
width: 100%;
height: 0;
padding-bottom: 100%;
}
```
JavaScript:
```javascript
var grid = document.querySelector('.grid');
var images = Array.from(grid.getElementsByTagName('img'));
// Случайный порядок массива картинок
images.sort(function() { return 0.5 - Math.random(); });
// Перемещение картинок в блоки
images.forEach(function(image, index) {
var emptyBlock = grid.querySelector('.empty:nth-child(' + (index + 1) + ')');
emptyBlock.parentNode.insertBefore(image, emptyBlock);
});
```
Обратите внимание, что сначала мы получаем ссылку на элемент с классом "grid". В нем мы находим все изображения и добавляем их в массив "images". Затем мы перемешиваем порядок массива "images" с использованием функции sort и Math.random(). После перемешивания мы перебираем массив "images" и вставляем каждую картинку перед соответствующим пустым блоком.
Вы также можете использовать другие языки программирования или фреймворки для достижения такого же результата в зависимости от того, какой язык или инструменты вы предпочитаете.